Rumah >hujung hadapan web >tutorial js >javascript中DOM的事件分析(附代码)
事件是什么?事件又有什么用?本篇文章将给到大家分享关于javascript中DOM的事件分析,给大家介绍了关于事件的概念以及事件的用法。
事件1、事件是什么
让JS知道程序用户行为,比如用户点击HTML页面中的某个按钮和用户输入用户名与密码等操作
<script> var button = document.getElementById('btn'); // 获取按钮元素 button.onclick = function () { // 事件绑定 console.log('你已点了我'); } </script>
2.注册事件
JS函数与指定事件相关联,被绑定函数成为事件的句柄
事件被激发时,会绑定函数会被调用
HTML元素的事件属性
表示实注册事件功能
该方式并没有与HTML结构与行为有效的分离
<body> <button onclick="mylove()" id="btn">按钮</button> <script> function mylove() { console.log('你已点了我'); } </script> </body>
DOM对象的事件属性
将Document对象定位在THML页面元素
并返回DOM对象体属性,通过它实现各种注册事件功能
<body> <button id="btn">按钮</button> <script> var btn = document.getElementById('btn'); btn.onclick = mylove; function mylove() { console.log('你已点了我'); } </script> </body>
事件监听器
以addEvantLisener()方法,调用该方法表示元素增加事件监听器
body> <button id="btn">按钮</button> <script> var btn = document.getElementById('btn'); btn.attachEvent('onclick',function () { console.log('XXX'); }) function bind(element,eventName, functionName) { if (element.addEventListener) { element.addEventListener() } } </script> </body>
事件监听器中的this
使用addEventListener()方法为页面注册事件时候,this是指注册事件元素
使用attachEent()方法为页面注册事件时候,this是指Window对象,,不是注册事件
<script> var qyc =document.getElementById('qyc'); /*qyc.addEventListener('click',function () { console.log(this);//this指当前绑定事件的元素 });*/ /*qyc.attachEvent('onclick',function () { console.log(this);//this指当前环境的全局对象(Window对象) });*/ bind(qyc,'click',function () { console.log(this);//在不同的浏览器中,this会有不同的表示 }); function bind(element, eventName, functionName) { if (element.addEventListener) { } else { element.attachEvent('on' + eventName, function () { functionName.call(element) }); } }//此为IE8之前的版本兼容的解决方案 </script> </body>
3、移除注册事件
removeEventListener()方法,调用此方法表示元素移除事件听器
<body> <button id="qyc">按钮</button> <script> var qyc = document.getElementById('qyc'); function mylove() { console.log('XXX'); } qyc.addEventListener('click',mylove); qyc.addEventListener('click',function () { console.log('YYY'); }); qyc.removeEventListener('click',mylove); function unbind(element,eventName,functionName) { if (element.removeEventListener) { element.removeEventListener(eventName, functionName); }else { element.detachEvent('on' + eventName, functionName); } } </script> </body>
4、Event事件对象
表示移除注册事件在IE8之前版本的
浏览器不支持removeEventListener()方法
<body> <button id="qyc" onclick="mylove(event)">按钮</button> <script> var qyc = document.getElementById('qyc'); qyc.addEventListener('click',function (event) { console.log(event); }); qyc.attachEvent('onclick',function () { console.log(window.event); }); function bind(element,eventName, functipnName) { if (element.addEventListener){ element.addEventListener(eventName,functipnName) } else { element.attachEvent('on' + eventName, function(){ functipnName.call(element); }); } } </script>
5、获取目标
Event事件对象提供target属性,获取触发当前事件的HTML元素
Event事件对象提供currentTarget属性,获取注册当前事件的HTML元素
<style> ul { background-color: red; } #wl { background-color: blue; } a { background-color: yellow; } </style> </head> <body> <ul id="yx"> <li>单机游戏</li> <li id="wl"><a href="#">网络游戏</a></li> <li>手机游戏</li> </ul> <script> var yx = document.getElementById('yx'); yx.addEventListener('click',function (event) { console.log(event.target); // target属性-获取绑定当前事件目标元素 console.log(event.currentTarget); // currentTarget属性-获取绑定当前事件目标元素 console.log(this); }); yx.attachEvent('onclick',function (event) { // IE8以下浏览器提供srcElement属性为target目标元素 var e = event || window.event; console.log(e.srcElement); }); </script> </body>
6、阻止默认行为
不使用默认,而是
<body> <a href="#">链接</a> <script> var aElement = document.getElementsByName('a'); /*aElement.addEventListener('click',function(event){ event.preventDefault();// 阻止默认行为 });*/ aElement.onclick = function (event) { event.preventDefault(); return false; } aElement.attachEvent('onclick',function (event) { var e = event || window.event; e.returnValue = false; }) </script> </body>
7、获取鼠标
pageX和pageY表示相对于页面中
clientX和clientY表示可视区域
screenX和screenY表示在当前屏幕的
<body> <script> var html = document.documentElement; html.addEventListener('click',function(event){ console.log(event.pageX, event.pageY); // 鼠标坐标值相对于当前HTML页面 console.log(event.clientX, event.clientY); // 鼠标坐标值相对于当前可视区域 console.log(event.screenX, event.screenY); // 鼠标坐标值相对于当前屏幕的 // 鼠标坐标值只能获取,不能设置 }); </script> </body>
8、事件流
<style> #q1 { width: 200px; height: 200px; background-color: red; padding: 50px; } #q2 { width: 100px; height: 100px; background-color: yellow; padding: 50px; } #q3 { width: 100px; height: 100px; background-color: blue; } </style> </head> <body> <div id="q1"> <div id="q2"> <div id="q3"></div> </div> </div> <script> var q1 = document.getElementById('q1'); q1.addEventListener('click',function(){ console.log('这是d1... ...'); }, false); var q2 = document.getElementById('q2'); q2.addEventListener('click',function(){ console.log('这是d2... ...'); }, false); var q3 = document.getElementById('q3'); q3.addEventListener('click',function(event){ console.log('这是q3... ...'); event.stopPropagation(); }, false); </script> </body>
9、事件委托
大量的HTML元素注册相同事件,并事件句柄逻辑安全相同,会造成页面速度下降,不果事件流允许这些HTML元素同父级元素注册事件
<body> <div id="qh"> <button id="qyc1">按钮</button> <button id="qyc2">按钮</button> <button id="qyc3">按钮</button> </div> <script> var qyc1 = document.getElementById('qyc1'); qyc1.addEventListener('click',function(){ console.log('这是个按钮'); }); var qyc2 = document.getElementById('qyc2'); qyc2.addEventListener('click',function(){ console.log('这是个按钮'); }); var qyc3 = document.getElementById('qyc3'); qyc3.addEventListener('click',function(){ console.log('这是个按钮'); }); var qh = document.getElementById('qh'); // 不把事件绑定给指定元素,绑定给共同父级和祖先元素 qh.addEventListener('click',function (event) { var target = event.target;//触发事件目标元素 if(targe.nodeName === 'BUTTON') { console.log('这是个按钮'); } }) </script> </body>
相关推荐:
理解javascript中DOM事件_javascript技巧
Atas ialah kandungan terperinci javascript中DOM的事件分析(附代码). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!