当前位置: 编程技术>WEB前端
本页文章导读:
▪跨浏览器的事件对象 在前端开发工作中，由于浏览器兼容性等问题，触发事件对象的方法不同，分为IE和非IE两种。下面主要介绍跨浏览器触发 目标事件、阻止事件的默认行为、阻止事件冒泡 三种方法：var Ev.........
▪跨浏览的DOM节点事件监听器 如果我们要让某个DOM节点监听事件，最简单的方法就是使用 on+xxx 方法，但是如下时,后面的事件会把前面的事件覆盖掉，只会弹出 2 。var div=document.getElementById('div');div.onclick = function(){ alert(1.........
▪文本框输入内容提示消失的两种实现 第一种方法：基于HTML5 input标签的新特性 - placeholder 。另外，x-webkit-speech 属性可以实现语音输入功能。1 <div><input type="email" name="email" spellcheck="false" placeholder="邮 箱" autofocus tabindex="1" x-we.........
[1]跨浏览器的事件对象
在前端开发工作中，由于浏览器兼容性等问题，触发事件对象的方法不同，分为IE和非IE两种。下面主要介绍跨浏览器触发 目标事件、阻止事件的默认行为、阻止事件冒泡 三种方法：
var EventUtil = {
target : function(e){ //目标事件
e = e || window.event;
return e.target || e.srcElement;
},
preventDefault : function(e){ //阻止事件的默认行为
e = e || window.event;
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}
},
stopPropagation : function(e){ //阻止事件冒泡
e = e || window.event;
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble = true;
}
}
};
target : function(e){ //目标事件
e = e || window.event;
return e.target || e.srcElement;
},
preventDefault : function(e){ //阻止事件的默认行为
e = e || window.event;
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}
},
stopPropagation : function(e){ //阻止事件冒泡
e = e || window.event;
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble = true;
}
}
};
以上代码，我们为EventUtil添加了3个方法，我们可以像下面这样使用这些方法：
var div=document.getElementById('div');
div.onclick = function(e){
var target = EventUtil.target(e);
alert(target.tagName);
}
div.onclick = function(e){
var target = EventUtil.target(e);
alert(target.tagName);
}
本文链接
[2]跨浏览的DOM节点事件监听器
如果我们要让某个DOM节点监听事件，最简单的方法就是使用 on+xxx 方法，但是如下时,后面的事件会把前面的事件覆盖掉，只会弹出 2 。
var div=document.getElementById('div');
div.onclick = function(){
alert(1);
}
div.onclick = function(){
alert(2);
}
div.onclick = function(){
alert(1);
}
div.onclick = function(){
alert(2);
}
我们可以使用以下方法来解决这个问题。
//////绑定事件监听器
function addEventHandler(target,type,func){
if(target.addEventListener){target.addEventListener(type,func,false);} //非IE
else if(target.attachEvent){target.attachEvent("on"+type,func);} //IE
else {target["on"+type]=func;}
}
//////解除事件监听器的绑定
function removeEventHandler(target,type,func){
if(target.removeEventListener){target.removeEventListener(type,func,false);} //非IE
else if(target.detachEvent){target.detachEvent("on"+type,func);} //IE
else delete target["on"+type];
}
function addEventHandler(target,type,func){
if(target.addEventListener){target.addEventListener(type,func,false);} //非IE
else if(target.attachEvent){target.attachEvent("on"+type,func);} //IE
else {target["on"+type]=func;}
}
//////解除事件监听器的绑定
function removeEventHandler(target,type,func){
if(target.removeEventListener){target.removeEventListener(type,func,false);} //非IE
else if(target.detachEvent){target.detachEvent("on"+type,func);} //IE
else delete target["on"+type];
}
我们像下面这样来使用这些方法：
var divs=document.getElementById("all");
addEventHandler(divs,"click",test1);
addEventHandler(divs,"click",test2);
addEventHandler(divs,"click",test3);
//removeEventHandler(divs,"click",test1);
function test1(){
alert(1);
}
function test2(){
alert(2);
}
function test3(){
alert(3);
}
addEventHandler(divs,"click",test1);
addEventHandler(divs,"click",test2);
addEventHandler(divs,"click",test3);
//removeEventHandler(divs,"click",test1);
function test1(){
alert(1);
}
function test2(){
alert(2);
}
function test3(){
alert(3);
}
本文链接
[3]文本框输入内容提示消失的两种实现
来源: docker中文入门学习手册
iis7站长之家
发布时间: 2013-11-06
第一种方法：
基于HTML5 input标签的新特性 - placeholder 。另外，x-webkit-speech 属性可以实现语音输入功能。
1 <div><input type="email" name="email" spellcheck="false" placeholder="邮 箱" autofocus tabindex="1" x-webkit-speech></div>
2 <div><input type="password" name="password" placeholder="密 码" tabindex="2"></div>
2 <div><input type="password" name="password" placeholder="密 码" tabindex="2"></div>
第二种方法：
用span模拟，定位span，借助JS键盘事件判断输入，确定span里的内容显示隐藏。 原文链接：点击查看
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>无标题文档</title>
6 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
7 <script type="text/javascript">
8 $(document).ready(function(){
9
10 $("#focus .input_txt").each(function(){
11 var thisVal=$(this).val();
12 //判断文本框的值是否为空，有值的情况就隐藏提示语，没有值就显示
13 if(thisVal!=""){
14 $(this).siblings("span").hide();
15 }else{
16 $(this).siblings("span").show();
17 }
18 //聚焦型输入框验证
19 $(this).focus(function(){
20 $(this).siblings("span").hide();
21 }).blur(function(){
22 var val=$(this
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>无标题文档</title>
6 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
7 <script type="text/javascript">
8 $(document).ready(function(){
9
10 $("#focus .input_txt").each(function(){
11 var thisVal=$(this).val();
12 //判断文本框的值是否为空，有值的情况就隐藏提示语，没有值就显示
13 if(thisVal!=""){
14 $(this).siblings("span").hide();
15 }else{
16 $(this).siblings("span").show();
17 }
18 //聚焦型输入框验证
19 $(this).focus(function(){
20 $(this).siblings("span").hide();
21 }).blur(function(){
22 var val=$(this
最新技术文章:
站内导航:
特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除！