事件

mac2025-12-23 10

事件

一、如何绑定事件处理函数

1.ele.onxxx = function(){}

兼容性很好，但是一个元素同一事件只能出现一次基本等同于写在HTML行间上程序this指向dom元素本身 //eg: div.onclick = function (){ console.log('a'); }

1 <div style="width: 100px; height:100px; =“console.log(‘a’)”>

2.obj.addEventListener(type, fn, false);

(事件类型，处理函数，false)IE9一下不兼容，可以为一个事件绑定多个处理程序，但是同一个函数不能多次引用程序this指向dom元素本身 var div = document.getElementsByTagName('div')[0]; div.addEventListener('click',function(){ console.log('a'); },false)

3.obj.attachEvent(‘on’ + 事件类型, 处理函数)

IE独有，一个事件同样可以绑定多个处理程序程序this指向window

绑定事件出现在循环中，考虑是不是会形成闭包，可以考虑使用立即执行函数更改

//点击第几个a，会弹出相应的序号 <body> <ul> <li>a</li> <li>a</li> <li>a</li> <li>a</li> </ul> <script> var lin = document.getElementsByTagName('li'); var len = lin.length; for (var i = 0; i < len; i ++){ (function (i) { lin[i].addEventListener('click',function () { console.log(i); },false); }(i)) } </script> </body>

二、解除事件处理程序

ele.onclick = false / null / ’ ’ele.removeEventLinstener(type, fn,false) //和你写的要对应ele.detschEvent(‘on’ + type, fn);若绑定匿名函数，则无法解除 <script> var div = document.getElementsByTagName('div')[0]; div.onclick = function (){ console.log('a'); this.onclick = null;//执行一次解除绑定 } </script> <script> var div = document.getElementsByTagName('div')[0]; div.addEventListener('click',test, false); function test(){ console.log('a'); } div.removeEventListener('click', test, false);//解除绑定，不能再执行 </script>

三、事件处理模型

事件冒泡：结构上（非视觉上）嵌套关系的元素，会存在事件冒泡功能，自子元素冒泡向父元素（自底向上）事件捕获：结构上（非视觉上）嵌套关系的元素，会存在事件捕获功能，自父元素捕获至子元素（自顶向下）（将前面事件中的false 改成 true）IE没有事件捕获触发顺序：先捕获，在自身事件执行，再冒泡focus , blur , change , submit , reset , select 等事件不能冒泡

取消冒泡

W3C标准：event.stopPropagation(); 不支持IE9以下IE独有：event.cancelBubble = true;

阻止默认事件

默认事件：表单提交，a标签跳转，右键菜单

return false; 以对象属性的方式注册的事件才生效event.preventDefault(); W3C标准event.returnValue = false; document.oncontextmenu = function(e){//右键出现菜单默认事件 console.log('a'); // return false; event.preventDefault(); }

事件对象

event || window.event 用于IE事件源对象

event.target (火狐只有这个) event.srcElement (IE只有这个)

事件委托

利用事件冒泡，和事件源对象进行处理优点：

性能不需要循环所有的元素一个一个绑定事件灵活当有新的子元素时不需要重新绑定事件 <ul> <li>a</li> <li>a</li> <li>a</li> <li>a</li> <li>a</li> </ul> <script> var ul = document.getElementsByTagName('ul')[0]; ul.onclick = function (e){ var event = e || window.event;//事件源对象 var target = event.target || event.srcElement; console.log(target.innerText); } </script>

拖拽问题

事件分类

一、鼠标事件

click(3) = mousedown(1) + mouseup(2) 、contextmenu、mouseover、 mouseout、 mouseenter 、mouseleave判断点击的是鼠标的那个键

用button 来区分鼠标的按键，button返回是0，则是左键；返回值是1，则是滚轮；返回值是2，则是右键 DOM3标准规定：click事件只能监听左键，不能监听右键，只能通过onmousedown ,onmuseup方法

二、键盘事件

keydown > keypress > keyupkeydown 和 keypress 的区别

keydown 可以响应任意键盘按键； keypress只可以响应字符类按键，且返回其ASCLL码，可以转化成相应字符

document.onkeypress = function (e){ console.log(String.fromCharCode(e.charCode)); }

三、文本操作事件

input ,focus, blur, change

var input = document.getElementsByTagName('input')[0]; input.oninput = function (e){ //也可以改为change console.log(this.value); } <input type="text" value="请输入用户名" onfocus="if(this.value =='请输入用户名') {this.value=''}" onblur="if(this.value==''){this.value='请输入用户名'}">

四、窗口操作事件

onscroll ：元素在滚动式触发onload ：整个页面加载完执行

最新回复(0)

事件

事件