化妆品网站建设,设计本官方网站广告,车公庙网站建设,价格划算的做网站事件驱动三要素 事件源#xff1a;即触发事件的元素 事件#xff1a;被JavaScript检测到的行为。例如#xff1a; 鼠标点击 键盘按键 选输入框 事件处理函数#xff1a;事件发生时要进行的操作#xff0c;又叫做“事件句柄”或“事件监听器” 事件分类#xff1a; 鼠标事…事件驱动三要素 事件源即触发事件的元素 事件被JavaScript检测到的行为。例如 鼠标点击 键盘按键 选输入框 事件处理函数事件发生时要进行的操作又叫做“事件句柄”或“事件监听器” 事件分类 鼠标事件 click 鼠标点击操作 dblclick 鼠标双击操作 mousedown 按下鼠标按键 mousemove 鼠标指针在元素上方移动 mouseover 鼠标指针进入元素 mouseout· 鼠标指针移出元素 键盘事件 keydown 按下键盘按键 keyup 抬起键盘按键 keypress 按下或按住键盘按键 表单事件 focus input获得焦点 blur input失去焦点 change 更改input元素的内容 页面事件 load 页面加载完成 事件绑定 HTML标签的事件属性 1 input type button id btn value 点击 ouclick test()/ 1 function(){ 2 //.... 3 } DOM标准的事件 通过on加事件类型的方式去绑定事件也属于DOM 0 级事件例 1 input typebutton id btn value 点击/2 3 //方式一4 btn.onclick function(){5 //...6 }7 8 9 //方式二
10 function test(){
11 //...
12 }
13 btn.onclick test; 事件监听器 DOM提供了事件监听器可以同时绑定或删除多个事件并且具有多个事件处理函数。属于DOM 2级事件 绑定 1 事件源.addEventListener(eventName, functionName, boolean); 删除 1 事件源.removeEventListener(eventName, functionName, boolean); 参数说明 eventName:为元素指定具体的事件名称例如单击事件是click等 functionName: 绑定事件的处理函数 boolean:布尔值默认为false。 绑定 1 input type button id btn value 点击/
2
3 btn.addEventListener(click.function(){
4 console.log(xxxxx);
5 },false); 删除 1 function handle(){
2 console.log(xxx);
3 }
4 //绑定事件
5 btn.addEventListener(click,handle,false);
6 //删除事件
7 btn.removeEventListener(click,handle,false); addEventListener() 方法还可以为指定一个元素绑定一个事件同时具有多个处理函数。如下代码示例: 1 btn.addEventListener(click.function(){
2 console.log(第一次执行);
3 },false);
4 btn.addEventListener(click.function(){
5 console.log(第二次执行);
6 },false); 转载于:https://www.cnblogs.com/amag/p/7471139.html
