js中事件绑定
1. 在元素标签中绑定事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> #div1 { width: 500px; height: 500px; background-color: red; } </style> </head> <body> <div id='div1' onclick="fn()"></div> <script type="text/javascript"> function fn() { console.log(111); // 111 } </script> </body> </html>
2. 通过onxxx()绑定事件：这种方式绑定的事件，同一个元素的同一种事件多次绑定，后面的事件会覆盖前面的事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> #div1 { width: 500px; height: 500px; background-color: red; } </style> </head> <body> <div id='div1'></div> <script type="text/javascript"> var obj = document.getElementById("div1"); obj.onclick = function() { console.log(11); }; obj.onclick = function() { console.log(22); }; // 只会输入22 // 移除事件 obj.onclick = null </script> </body> </html>
3. obj.addEventListener()绑定事件监听
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> #div1 { width: 500px; height: 500px; background-color: red; } </style> </head> <body> <div id='div1'></div> <script type="text/javascript"> // addEventListener方法在ie8及以下不支持，ie8中可以使用attachEvent() /* * 事件注册兼容写法，参数如下： * ele：dom元素 * type：事件类型 * fn：处理函数 */ function addEvent(ele, type, fn) { if(ele.addEventListener) { ele.addEventListener(type, fn, false); }else { ele.attachEvent('on' + type, fn); } } var obj = document.getElementById("div1"); addEvent(obj, 'click', function() { console.log(222); }) // 移除事件 // addEventListener --> removeEventListener // attachEvent --> detachEvent </script> </body> </html>
jquery中事件绑定
1. on()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <style type="text/css"> #div1 { width: 500px; height: 500px; background-color: red; } </style> </head> <body> <div id='div1'> <span id="span1">hello world</span> <span id="span2">hello world</span> </div> <script type="text/javascript"> /* * 语法：$(selector).on(event,childSelector,data,function) * 参数如下： * event：事件类型 * childSelector： 可选，绑定到指定子元素 * data： 传入到函数的额外参数 * function：处理函数 */ $('#div1').on('click', '#span1', function() { console.log(111) }) // 移除事件 off() </script> </body> </html>