事件绑定方式：将对html元素或窗口的操作绑定给响应函数的方式。共四种方式
- Html级别绑定
- 符合DOM0 级的事件绑定方式
- 符合DOM2
Html级别绑定
无法设置事件流
<script>
function a(){
//好的习惯，把整个网页上所有的事件绑定程序，聚集在一个函数中
alert("nihao");
}
</script>
<input type="button" value="html级别绑定方式" onclick="a()" />
符合DOM0 级的事件绑定方式
将响应程序直接赋值给dom元素的事件属性。这是DOM最早版本的事件绑定方式，被所有浏览器兼容
无法设置事件流
1、是用普通函数作为响应程序
document.getElementById("btn1").onclick = sayHellow; 不要带（）, 带着（）表示直接调用·
<h2>DOM0级别的绑定方式</h2> <input type="button" id="btn1" value="DOM0级别的绑定方式" /> <script> window.onload=function(){ document.getElementById("btn1").onclick = sayHellow; //注意不要带（） } function sayHellow(){ alert("hi==") } </script>
2、是用匿名函数作为响应程序
document.getElementById("btn2").onclick = function(){ alert("hi："+this.id) }
或者
document.getElementById("btn2").onclick = _ => console.log("hi123ID："+this); //参考我的博客：JavaScript箭头函数（Lambda表达式）
弹出 ： btn1
特点：
- 在响应函数中this代表目标元素(当前的button对象)
- 不符合DOM2标准，无法设定事件流
- 无法直接传递参数，但可以通过其他方式传递
- 对同一个事件只能绑定一个响应函数，最后绑定的响应函数会执行
- 通过 obj.onxx = null 可以解除绑定。
总结：可以使用匿名函数或普通函数作为响应函数
传递参数的方式：
传递参数的方法1 ---将参数 作为属性赋 给事件源
<input type="button" id="btn3" workerNum=987 value="属性传递参数" />
document.getElementById("btn3").onclick = function(){ alert("hi："+this.getAttribute("workerNum")); }
传递参数方法2
使用绑定函数，专门设置一个函数，实现两重调用（绑定）
<input type="button" id="btn4" workerNum="==属性参数==" value="动态绑定事件并传递参数" />
//绑定函数
bindEvent(document.getElementById("btn4"),"onclick",onclickWorker,"btn=123");
//响应函数
function onclickWorker(wNum){ alert("工号为："+ wNum); }
//执行事件绑定，将参数传给事件源
function bindEvent(dom, eventType , fun ,args){
dom[eventType] = handleEvent;
function handleEvent(){ //闭包
fun.call(this,args); //给响应函数的 this 指针赋值为 dom
}
}
其实综合起来就是一句话：document.getElementById("btn4")["onclick"]= _ => onclickWorker("99999”);
传递参数方法3
JS中的call、apply、bind方法详解
符合DOM2级别的事件绑定方式：（不兼容）
绑定后可以设定事件流的顺序，顺序为绑定顺序。
格式：addEventListener("eventType",callback,use-capture);
- eventTye：事件名称。 click 省略on
- callback：事件处理方法
- use-capture：false-->冒泡阶段/ture-->捕获阶段。
ps:大多数情况下，都是将事件处理程序添加到事件流的冒泡阶段，这样可以最大限度地兼容各种浏览器
//浏览器可以自动传入一个对象 event对象 /*document.getElementById("outerDiv").addEventListener("click" , function(){ //执行语句 })*/ //匿名函数方式 document.getElementById("outerDiv").addEventListener("click" ,handleEvent ); //绑定函数方式
特点 ：
可以使用匿名函数或普通函数
响应函数中this代表目标函数
可以设定事件流
无法传递参数，通过其他方式传递
对同一个事件可以绑定多个形影函数，响应函数执行顺序依据绑定顺序
建议使用jquery 的on方法 解决绑定函数兼容方式
1、可以传递参数
2、实现了事件委托
3、on方法可以实现事件流控制
4、在一般的浏览器都兼容
出处：https://my.oschina.net/u/2991733/blog/800883
=======================================================================================
JavaScript绑定事件的方法[3种]
要想让 JavaScript 对用户的操作作出响应，首先要对 DOM 元素绑定"事件处理函数"。所谓事件处理函数，就是处理用户操作的函数，不同的操作对应不同的名称。
在JavaScript中，有三种常用的绑定事件的方法：
- 在DOM元素中直接绑定；
- 在JavaScript代码中绑定；
- 绑定事件监听函数。
一. 在DOM元素中直接绑定
一. 在DOM元素中直接绑定这里的DOM元素，可以理解为HTML标签。JavaScript支持在标签中直接绑定事件，语法为：
onXXX="JavaScript Code"
其中：
- onXXX 为事件名称。例如，鼠标单击事件 onclick ，鼠标双击事件 ondouble，鼠标移入事件 onmouseover，鼠标移出事件 onmouseout 等。
- JavaScript Code 为处理事件的JavaScript代码，一般是函数。
例如，单击一个按钮，弹出警告框的代码有如下两种写法。
1. 原生函数
实例：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <input type="button" value="点我" onclick="myClick(this)"/> <script> function myClick(ths){ ths.style.backgroundColor="red"; } </script></body></html> |
效果：
二. 在JavaScript代码中绑定
在JavaScript代码中（即<script>标签内）绑定事件可以使JavaScript代码与HTML标签分离，文档结构清晰，便于管理和开发。
在JavaScript代码中绑定事件的语法为：
elementObject.onXXX=function(){ // 事件处理代码 }
其中：
- elementObject 为DOM对象，即DOM元素。
- onXXX 为事件名称。
例如，为 id="demo" 的按钮绑定一个事件，显示它的 type 属性：
|
1
2
3
4
5
6
|
<input id="demo" type="button" value="点击我，显示 type 属性" /><script type="text/javascript">document.getElementById("demo").onclick=function(){ alert(this.getAttribute("type")); // this 指当前发生事件的HTML元素，这里是<input>标签}</script> |
this在第二种绑定方式中的应用：
|
1
2
3
4
5
6
7
|
<input id='i1' type='button'>document.getElementById('i1').onclick=function(){this // 这里的this代指当前点击的标签} |
三. 绑定事件监听函数
绑定事件的另一种方法是用 addEventListener() 或 attachEvent() 来绑定事件监听函数。
addEventListener()函数语法：
elementObject.addEventListener(eventName,handle,useCapture);
addEventListener()是标准的绑定事件监听函数的方法，是W3C所支持的，Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持该函数。
| 参数 | 说明 |
|---|---|
| elementObject | DOM对象（即DOM元素）。 |
| eventName | 事件名称。注意，这里的事件名称没有“ on ”，如鼠标单击事件 click ，鼠标双击事件 doubleclick ，鼠标移入事件 mouseover，鼠标移出事件 mouseout 等。 |
| handle | 事件句柄函数，即用来处理事件的函数。 |
| useCapture | Boolean类型，是否使用捕获，一般用false 。true:捕获模型；false：冒泡模型 |
useCapture: false, true 的实例效果探索
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><style> #main{ background-color:red; 300px; height:400px; } #content{ background-color:pink; 150px; height:200px; }</style><body> <div id="main"> <div id="content"></div> </div> <script> var mymain=document.getElementById("main"); var mycontent=document.getElementById("content"); mymain.addEventListener("click",function(){console.log("main")},false); mycontent.addEventListener("click",function(){console.log("content")},false); </script></body></html> |
false 效果，从内往外出来，所以是content先出来：
true效果，从外往内出来，所以是main先出来：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><style> #main{ background-color:red; 300px; height:400px; } #content{ background-color:pink; 150px; height:200px; }</style><body> <div id="main"> <div id="content"></div> </div> <script> var mymain=document.getElementById("main"); var mycontent=document.getElementById("content"); mymain.addEventListener("click",function(){console.log("main")},true); mycontent.addEventListener("click",function(){console.log("content")},true); </script></body></html> |
效果图：
出处：https://www.cnblogs.com/momo8238/p/7449437.html
=======================================================================================
JavaScript 事件属性绑定带参数的函数
在JavaScript中，为了实现表现和控制相分离，可以通过0级的DOM事件属性或者2级的事件模型来实现，不过这两者在针对某个事件类型调用相应的事件句柄的时候，不能给事件句柄提供参数，也就是说，事件属性的值只能是一个函数引用。
例如不能采用以下这种调用方式：
element.onclick = test();
element.onclick = test(arg1,arg2);
只能通过：element.onclick = function(){ ... };
或者element.onclick = test这种方式来实现，所以无法给函数传递参数。
参考了大量的网上资料，解决这个问题的方式，以代码为例，如下所示：
function Handler() {}; Handler.prototype = { /* * 把eventType类型的事件绑定到element元素，并使用handler事件句柄进行处理 * 兼容 IE 及 Firefox 等浏览器 * * @param element 在其上注册事件的对象（Object） * @param eventType 注册的事件类型（String），不加“on” * @param handler 事件句柄（Function） */ registerEvent: function(element, eventType, handler) { if (element.attachEvent) { //2级DOM的事件处理 element.attachEvent('on' + eventType, handler); } else if (element.addEventListener) { element.addEventListener(eventType, handler, false); } else { //0级DOM的事件处理 element['on' + eventType] = handler; } }, /* * 获得带参数的事件句柄的引用 * * @param obj 需要绑定事件处理函数的所有者，null 表示 window 对象 * @param func 需要绑定的事件处理函数名 * @param ... 第三个参数开始为绑定事件处理函数的参数，由 0 到多个构成 */ bind: function(obj, handler) { obj = obj || window; var args = []; for (var i = 2; i < arguments.length; i++) { args.push(arguments[i]); } return function() { handler.apply(obj, args) }; } }可能是使用方式为： function show(txtObj) { alert(txtObj.value); txtObj.focus(); txtObj.select(); } window.onload = function() { var handler = new Handler(); handler.registerEvent($("txt"), "change", handler.bind(null, show, $("txt"))); //采用2级事件模型的方式 //$("txt").onchange = handler.bind(null,show,$("txt"));//JavaScript事件属性的方式 }
您可能感兴趣的文章:
- JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
- JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
- js中DOM事件绑定分析
- JS 事件绑定、事件监听、事件委托详细介绍
- JavaScript给按钮绑定点击事件（onclick）的方法
- js创建一个input数组并绑定click事件的方法
- javascript事件委托的方式绑定详解
- Javascript 事件流和事件绑定
- JS动态添加元素及绑定事件造成程序重复执行解决
- javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
- js事件on动态绑定数据,绑定多个事件的方法
- JavaScript Dom 绑定事件操作实例详解
====================================================================================
功能优化
根据上面的提示，我自己进行了优化，用在自己的项目上。
方便使用，接口方法统一，优化后的代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id='txt' placeholder="请输入关键词" />
<input type="button" id="btn1" value="绑定事件函数()" />
<input type="button" id="btn2" value="绑定事件函数(参数)" />
<script>
function Handler() {};
Handler.prototype = {
/*
* 把eventType类型的事件绑定到element元素，并使用handler事件句柄进行处理
* 兼容 IE 及 Firefox 等浏览器
*
* @param element 在其上注册事件的对象（Object）
* @param eventType 注册的事件类型（String）
* @param fun 事件句柄（Function）
*/
registerEvent: function(element, eventType, fun) {
eventType = (eventType.toLowerCase().startsWith("on")?"":"on")+eventType;
var args = [element,fun];
for (var i = 3; i < arguments.length; i++) {
args.push(arguments[i]);
}
handler = this.bindFun.apply(null,args);
if (element.attachEvent) { //2级DOM的事件处理
element.attachEvent(eventType, handler);
} else if (element.addEventListener) {
element.addEventListener(eventType.substring(2), handler, false);
} else { //0级DOM的事件处理
element[eventType] = handler;
}
},
/*
* 获得带参数的事件句柄的引用
*
* @param obj 需要绑定事件处理函数的所有者，null 表示 window 对象
* @param func 需要绑定的事件处理函数名
* @param ... 第三个参数开始为绑定事件处理函数的参数，由 0 到多个构成
*/
bindFun: function(obj, handler) {
//console.log(this);
obj = obj || window;
var args = [];
for (var i = 2; i < arguments.length; i++) {
args.push(arguments[i]);
}
return function() {
handler.apply(obj, args)
};
}
}
//使用方式为：
function show(txtObj) {
var str="normal";
str=txtObj?.id;
for (var i = 1; i < arguments.length; i++) {
str+="
"+arguments[i];
}
alert(str);
//txtObj.focus();
//txtObj.select();
}
window.onload = function() {
var handler = new Handler();
var dom=document.getElementById("txt");
handler.registerEvent(dom, "onchange", show, dom,0,1,2,3); //采用2级事件模型的方式
//dom.onchange = handler.bindFun(null,show,dom,'1111',"aa"); //JavaScript事件属性的方式
dom=document.getElementById("btn1");
handler.registerEvent(dom, "click", show, dom);
dom=document.getElementById("btn2");
handler.registerEvent(dom, "click", show,dom,1,2,3,4,5);
}
</script>
</body>
</html>
