js 事件模型 + ( 事件类型 )

Dom事件

事件是一种异步编程的实现方式,本质上是程序各个组成部分之间的通信。DOM支持大量的事件

(一) EventTarget接口

DOM的事件操作(监听和触发),都定义在EventTarget接口。Element节点、document节点和window对象,都部署了这个接口。

EventTarget接口有三个方法:

  • addEventListener:绑定事件的监听函数
  • removeEventListener:移除事件的监听函数
  • dispatchEvent:触发事件

(1) addEventListener() 方法

addEventListener方法用于在当前节点或对象上,定义一个特定事件的监听函数。

target.addEventListener(type, listener, options);

  • addEventListener方法接受三个参数。
    type:事件名称,大小写敏感。
    listener:监听函数。事件发生时,会调用该监听函数。
    useCapture:布尔值,表示监听函数是否在捕获阶段(capture)触发,默认为false(监听函数只在冒泡阶段被触发)。老式浏览器规定该参数必写,较新版本的浏览器允许该参数可选。为了保持兼容,建议总是写上该参数。
  • addEventListener方法可以为当前对象的同一个事件,添加多个监听函数。这些函数按照添加顺序触发,即先添加先触发。如果为同一个事件多次添加同一个监听函数,该函数只会执行一次,多余的添加将自动被去除(不必使用removeEventListener方法手动去除)。
  • addEventListener方法指定的监听函数,内部的this对象总是指向触发事件的那个节点。

window.onload = function() {
    var a = document.getElementById('a');
    var go = function() {
        console.log('这是addEventListener函数')
    }
    var to = function() {
        console.log('addEventListener可以为当前对象的同一事件,绑定不同的监听函数,先绑定的先执行')
    }
    a.addEventListener('click', go, false)   // 为a的 click事件 绑定了 监听函数go,在冒泡阶段触发
    a.addEventListener('click', to, false)   // 为当前对象 同一事件 绑定不同的 监听函数
}


--------------------------------------------------------------------------------


function hello() {
  console.log('Hello world');
}

document.addEventListener('click', hello, false);
document.addEventListener('click', hello, false);


// 执行上面代码,点击文档只会输出一行Hello world

  • 如果希望向监听函数传递参数,可以用匿名函数包装一下监听函数。

function print(x) {
  console.log(x);
}

var el = document.getElementById('div1');
el.addEventListener('click', function () { print('Hello'); }, false);


---------------------------------------------


window.onload = function () {
    var a = document.getElementById('a');
    var go = function(x,e) {
        console.log(x)
        console.log(e,'每一个事件都会生成一个事件对象,作为参数,传给监听函数') //比如e.target等
    };
    a.addEventListener('click', function(e){ go('wang',e) }, false)
    var b = new Event('click');
    var c = a.dispatchEvent(b);

    console.log(c,'dispatchEvent()方法返回布尔值')
};

(2) removeEventListener() 方法

removeEventListener方法用来移除addEventListener方法添加的事件监听函数。

  • 参数: 与 addEventListener()方法一致 有三个参数,分别是:
    1.事件名称,
    .2监听函数,
    3.布尔值是否在捕获阶段触发,默认是false

  • 注意:
    removeEventListener方法移除的监听函数,必须与对应的addEventListener方法的参数完全一致,而且必须在同一个元素节点,否则无效。

(3) dispatchEvent() 方法-------------触发事件

dispatchEvent方法在当前节点上触发指定事件,从而触发监听函数的执行。该方法返回一个布尔值,只要有一个监听函数调用了Event.preventDefault(),则返回值为false,否则为true。

  • dispatchEvent方法的参数是一个Event对象的实例。

  • 如果dispatchEvent方法的参数为空,或者不是一个有效的事件对象,将报错。

  • dispatchEvent() 在当前节点上触发指定事件------从而触发事件上绑定的监听函数去执行

  • dispatchEvent() 方法返回一个布尔值,只要有一个监听函数调用了 Event.preventDefault(),就会返回false,否则返回true-------( 同一个事件,可以绑定多个监听函数 )`


para.addEventListener('click', hello, false);
var event = new Event('click');
para.dispatchEvent(event);

// 上面代码在当前节点触发了click事件。


----------------------------------------------------


 var c =  document.getElementById('c');
    function dispatch() {
      console.log(
        'dispatchEvent()作用是触发事件,参数是Event对象的实例,触发事件,从而出发事件绑定的监听函数'
       )
    }
    c.addEventListener('click', dispatch, false);
    var click = new Event('click');
    var d = c.dispatchEvent(click);   // dispatchEvent()事件执行后,返回一个布尔值
    console.log(d)      // true   


    // ------(只要有一个监听函数调用了 Event.preventDefault(),就会返回false,否则返回true)






(二) 监听函数

监听函数(listener)是事件发生时,程序所要执行的函数。

  • DOM提供三种方法,可以用来为事件绑定监听函数。

(1) HTML标签的on-属性

HTML语言允许在元素标签的属性中,直接定义某些事件的监听代码。

  • 使用这个方法指定的监听函数,只会在冒泡阶段触发。
  • “HTML标签的on-属性”,违反了HTML与JavaScript代码相分离的原则;

<body onload="doSomething()">
<div onclick="console.log('触发事件')">

// 上面代码为body节点的load事件、div节点的click事件,指定了监听函数。
// 使用这个方法指定的监听函数,只会在冒泡阶段触发。
  • 注意,使用这种方法时,on-属性的值是将会执行的代码,而不是一个函数。

<!-- 正确 -->
<body onload="doSomething()"> 



 // on-属性    方法,标签中  属性的值 是将要执行的代码,而不是函数(即 执行函数,而不是定义函数 )



<!-- 错误 -->
<body onload="doSomething">

  • Element元素节点的setAttribute方法,其实设置的也是这种效果。
el.setAttribute('onclick', 'doSomething()');

等同于

<body onclick="doSomething()">    // 这里的c,大小写都可以

(2) Element节点的事件属性

Element节点对象有事件属性,同样可以指定监听函数。

  • 使用这个方法指定的监听函数,只会在冒泡阶段触发。
  • “Element节点的事件属性”的缺点是,同一个事件只能定义一个监听函数,也就是说,如果定义两次onclick属性,后一次定义会覆盖前一次。
window.onload = doSomething;

div.onclick = function(event){
  console.log('触发事件');
};

// 使用这个方法指定的监听函数,只会在冒泡阶段触发。

(3) addEventListener方法

  • 在上面三种方法中:

  • 第一种“HTML标签的on-属性”,违反了HTML与JavaScript代码相分离的原则;

  • 第二种“Element节点的事件属性”的缺点是,同一个事件只能定义一个监听函数,也就是说,如果定义两次onclick属性,后一次定义会覆盖前一次。

  • 因此,这两种方法都不推荐使用,除非是为了程序的兼容问题,因为所有浏览器都支持这两种方法。

  • addEventListener是推荐的指定监听函数的方法。有如下三个优点:

  • 1.可以针对同一个事件,添加多个监听函数。

  • 2.能够指定在哪个阶段(捕获阶段还是冒泡阶段)触发回监听函数。

  • 3.除了DOM节点,还可以部署在window、XMLHttpRequest等对象上面,等于统一了整个JavaScript的监听函数接口。

(4) 在监听函数中 this的指向

实际编程中,监听函数内部的this对象,常常需要指向触发事件的那个Element节点。

  • addEventListener方法指定的监听函数,内部的this对象总是指向触发事件的那个节点。
  • 如果将监听函数部署在Element节点的on-属性上面,this不会指向触发事件的元素节点。

// HTML代码为
// <p id="para">Hello</p>

var id = 'doc';
var para = document.getElementById('para');

function hello(){
  console.log(this.id);  // addEventListener监听函数中的this,总是指向 触发事件的那个节点
}

para.addEventListener('click', hello, false);

总结

  • 总结一下,以下写法的this对象都指向Element节点。

// JavaScript代码
element.onclick = print
element.addEventListener('click', print, false)
element.onclick = function () {console.log(this.id);}

// HTML代码
<element onclick="console.log(this.id)">


--------------------------------------------------------

  • 以下写法的this对象,都指向全局对象。
// JavaScript代码
element.onclick = function (){ doSomething() };
element.setAttribute('onclick', 'doSomething()');

// HTML代码
<element onclick="doSomething()">





(三) 事件的传播

当一个事件发生以后,它会在不同的DOM节点之间传播(propagation)。这种传播分成三个阶段:

  • 第一阶段:从window对象传导到目标节点,称为“捕获阶段”(capture phase)。
  • 第二阶段:在目标节点上触发,称为“目标阶段”(target phase)。
  • 第三阶段:从目标节点传导回window对象,称为“冒泡阶段”(bubbling phase)。

这种三阶段的传播模型,会使得一个事件在多个节点上触发。比如,假设点击<div>之中嵌套一个<p>节点。( phase是阶段的意思 )---------( bubbling是冒泡的意思 )

  • 用户点击网页的时候,浏览器总是假定click事件的目标节点,就是点击位置的嵌套最深的那个节点(嵌套在<div>节点的<p>节点)。所以,<p>节点的捕获阶段和冒泡阶段,都会显示为target阶段。
  • 事件传播的最上层对象是window,接着依次是document,html(document.documentElement)和body(document.body)。
  • 也就是说,如果<body>元素中有一个<div>元素,点击该元素。事件的传播顺序:
    (1) 在捕获阶段依次为window、document、html、body、div。
    (2) 在冒泡阶段依次为div、body、html、document、window。

(四) 事件的代理

由于事件会在 冒泡阶段 向上传播到父节点,因此可以把子节点的监听函数定义在父节点上,由父节点的监听函数统一处理多个子元素的事件。这种方法叫做事件的代理(delegation)。

  • 这样做的好处是,只要定义一个监听函数,就能处理多个子节点的事件,而且以后再添加子节点,监听函数依然有效。

var ul = document.querySelector('ul');

ul.addEventListener('click', function(event) {
  if (event.target.tagName.toLowerCase() === 'li') {
    // some code
  }
});


---------------------------------------
实例:


--
html部分:

    <div id="bubb" style="padding:20px;background:yellow; ">
        <p style="background:blueviolet">这是div中的p元素</p>
        <button style="background:royalblue">这是div中的按钮</button>
    </div>




--
js部分:

var e = document.getElementById('bubb');
    var func = function (event) {
        var tagname = event.target.tagName.toLowerCase();   // 目标节点的标签名
        if( tagname === 'p') {
            console.log('这是p元素')
        } else if( tagname === 'button') {
            console.log('这是button')
        } else {
            console.log('这是div父元素')
        }
    };
    e.addEventListener('click', func)

stopPropagation方法

  • 如果希望事件到某个节点为止,不再传播,可以使用事件对象stopPropagation方法。
p.addEventListener('click', function(event) {
  event.stopPropagation();    // stopPropagation() 阻止冒泡
});

// 用上面的代码以后,click事件在冒泡阶段到达<p>节点以后,就不再向上(父节点的方向)传播了。

stopImmediatePropagation方法

  • 但是,stopPropagation方法只会阻止当前监听函数的传播,不会阻止<p>节点上的其他click事件的监听函数。如果想要不再触发那些监听函数,可以使用stopImmediatePropagation方法。
p.addEventListener('click', function(event) {
 event.stopImmediatePropagation();
});

p.addEventListener('click', function(event) {
 // 不会被触发
});





(5) Event对象

事件发生以后,会生成一个事件对象,作为参数传给监听函数。浏览器原生提供一个Event对象,所有的事件都是这个对象的实例,或者说继承了Event.prototype对象。

  • 事件发生后,会生成一个事件对象,作为传给监听函数的参数
  • 所有事件都是Event对象的实例,即 ( 所有事件都继承了Event.prototype对象 )
  • Event对象本身就是一个构造函数,可以用来生成新的实例。

(1) Event构造函数接受两个参数:

  • 第一个参数是字符串,表示事件的名称;

  • 第二个参数是一个对象,表示事件对象的配置。该参数可以有以下两个属性。
    bubbles:布尔值,可选,默认为false,表示事件对象是否冒泡。
    cancelable:布尔值,可选,默认为false,表示事件是否可以被取消。

event = new Event(typeArg, eventInit);

var ev = new Event(
  'look',
  {
    'bubbles': true,
    'cancelable': false
  }
);
document.dispatchEvent(ev);


// 上面代码新建一个look事件实例,然后使用dispatchEvent方法触发该事件。
例二:

para.addEventListener('click', hello, false);
var event = new Event('click');
para.dispatchEvent(event);   // 触发事件

例三:

window.onload = function () {
    var a = document.getElementById('a');
    var go = function(x,e) {
        console.log(x)
        console.log(e,'每一个事件都会生成一个事件对象,作为参数,传给监听函数,')
        console.log(e.bubbles,'e.bubbles')   // 在监听函数中,获取是否冒泡,只读
    };
    a.addEventListener('click', function(e){ go('wang',e) }, false)
    var b = new Event('click',{bubbles: true});  // 在创建click方法实例的时候,定义是否冒泡
    var c = a.dispatchEvent(b);

    console.log(c,'dispatchEvent()方法返回布尔值')
};

(2) event.bubbles

bubbles属性返回一个布尔值,表示当前事件是否会冒泡。该属性为只读属性,只能在新建事件时改变。除非显式声明,Event构造函数生成的事件,默认是不冒泡的。

  • bubbles是冒泡的意思 (bubbling)
  • event.bubsles 返回布尔值,表示当前事件是否会冒泡,默认是false
  • event.bubbles 是只读属性

(3) event.eventPhase

eventPhase属性返回一个整数值,表示事件目前所处的阶段。

  • phase 是阶段的意思
    0,事件目前没有发生。
    1,事件目前处于捕获阶段,即处于从祖先节点向目标节点的传播过程中。该过程是从Window对象到Document节点,再到HTMLHtmlElement节点,直到目标节点的父节点为止。
    2,事件处目标阶段,事件到达目标节点,即target属性指向的那个节点。
    3,事件处于冒泡阶段,即处于从目标节点向祖先节点的反向传播过程中。该过程是从父节点一直到Window对象。只有bubbles属性为true时,这个阶段才可能发生。--------3阶段,即冒泡阶段只有bubbles为true才有可能会发生

(4) event.cancelable

cancelable属性返回一个布尔值,表示事件是否可以取消。该属性为只读属性,只能在新建事件时改变。除非显式声明,Event构造函数生成的事件,默认是不可以取消的。

  • 如果要取消某个事件,需要在这个事件上面调用preventDefault方法,这会阻止浏览器对某种事件部署的默认行为。

(5) defaultPrevented

defaultPrevented属性返回一个布尔值,表示该事件是否调用过preventDefault方法。

(6) currentTarget

currentTarget属性返回事件当前所在的节点,即正在执行的监听函数所绑定的那个节点。
作为比较,target属性返回事件发生的节点。如果监听函数在捕获阶段和冒泡阶段触发,那么这两个属性返回的值是不一样的。

  • currentTarget 返回的是正在执行的监听函数所绑定的那个节点。

(7) target

target属性返回触发事件的那个节点,即事件最初发生的节点。如果监听函数不在该节点触发,那么它与currentTarget属性返回的值是不一样的。

  • target 返回触发事件的那个节点


    事件代理中的 currentTarget 和 target

(8) event.type

type属性返回一个字符串,表示事件类型,大小写敏感。

  • event.type 返回的是字符串,表示事件类型:比如click事件,mouseover事件等
  • 大小写敏感

(9) event.detail

detail属性返回一个数值,表示事件的某种信息。具体含义与事件类型有关,对于鼠标事件,表示鼠标按键在某个位置按下的次数,比如对于dblclick事件,detail属性的值总是2。

  • 返回一个数值

(10) event.timeStamp

timeStamp属性返回一个毫秒时间戳,表示事件发生的时间。

(11) isTrusted

isTrusted属性返回一个布尔值,表示该事件是否为真实用户触发。

  • 用户触发的事件返回true,脚本触发的事件返回false。

(12) event.preventDefault()

preventDefault方法取消浏览器对当前事件的默认行为

  • event.preventDefault方法生效的前提是:事件对象的cancelable属性为true,如果为false,则调用该方法没有任何效果。
  • 该方法不会阻止事件的进一步传播(stopPropagation方法可用于这个目的)。只要在事件的传播过程中(捕获阶段、目标阶段、冒泡阶段皆可),使用了preventDefault方法,该事件的默认方法就不会执行。

(13) event.stopPropagation()

stopPropagation方法阻止事件在 DOM 中继续传播,防止再触发定义在别的节点上的监听函数,但是不包括在当前节点上新定义的事件监听函数。









事件类型

(一) 鼠标事件

(1) click事件

当用户在Element节点、document节点、window对象上单击鼠标(或者按下回车键)时,click事件触发。

  • “鼠标单击”定义为,用户在同一个位置完成一次mousedown动作和mouseup动作。它们的触发顺序是:mousedown首先触发,mouseup接着触发,click最后触发。

(2) dblclick事件

dblclick事件当用户在element、document、window对象上,双击鼠标时触发。该事件会在mousedown、mouseup、click之后触发。

(3) mousedown事件

mousedown在按下鼠标键时触发。

(4) mouseup 事件

mouseup在释放按下的鼠标键时触发。

(5) mousemove事件

mousemove事件当鼠标在一个节点内部移动时触发。当鼠标持续移动时,该事件会连续触发。为了避免性能问题,建议对该事件的监听函数做一些限定,比如限定一段时间内只能运行一次代码。

  • mousemove事件在节点内部移动时触发。
  • 当鼠标持续移动时,会连续触发
  • 性能优化,对监听函数做限制,如:一定时间内只能运行一次代码

(6) mouseover事件 和 mouseenter事件

mouseover事件和mouseenter事件,都是鼠标进入一个节点时触发。

  • 两者的区别是:
  • mouseenter事件只触发一次,
  • 而只要鼠标在节点内部移动,mouseover事件会在 (子节点) 上触发多次。!!! ( 重要 )

(7) mouseout 事件,mouseleave 事件

mouseout事件和mouseleave事件,都是鼠标离开一个节点时触发。

  • 两者的区别是:
  • mouseout事件会冒泡,mouseleave事件不会。
  • 子节点的mouseout事件会冒泡到父节点,进而触发父节点的mouseout事件。
  • mouseleave事件就没有这种效果,所以离开子节点时,不会触发父节点的监听函数。

(8) contextmenu 事件

contextmenu事件在一个节点上点击鼠标右键时触发,或者按下“上下文菜单”键时触发。




(二) 滚轮事件

(1) wheel事件

wheel事件是与鼠标滚轮相关的事件,目前只有一个wheel事件。用户滚动鼠标的滚轮,就触发这个事件。

  • wheel是滚轮的意思
  • wheel事件除了继承了MouseEventUIEventEvent 的属性,WheelEvent 还有几个自己的属性。
    deltaX:返回一个数值,表示滚轮的水平滚动量。
    deltaY:返回一个数值,表示滚轮的垂直滚动量。
    deltaZ:返回一个数值,表示滚轮的Z轴滚动量。
    deltaMode:返回一个数值,表示滚动的单位,适用于上面三个属性。0表示像素,1表示行,2表示页。
  • 浏览器提供一个WheelEvent构造函数,可以用来生成滚轮事件的实例。它接受两个参数,第一个是事件名称,第二个是配置对象。
var syntheticEvent = new WheelEvent("syntheticWheel", {"deltaX": 4, "deltaMode": 0});



(三) 键盘事件

(1)键盘事件用来描述键盘行为,主要有keydown、keypress、keyup三个事件。

  • keydown:按下键盘时触发该事件。

  • keypress:只要按下的键并非Ctrl、Alt、Shift和Meta,就接着触发keypress事件。

  • keyup:松开键盘时触发该事件。

(2) 如果用户一直按键不松开,就会连续触发键盘事件,触发的顺序如下。

keydown
keypress
keydown
keypress
(重复以上过程)
keyup

(3) 键盘事件使用 KeyboardEvent 对象表示,该对象继承了UIEvent和MouseEvent对象。浏览器提供KeyboardEvent构造函数,用来新建键盘事件的实例。

(4) altKey,ctrlKey,metaKey,shiftKey

  • altKey:alt键
  • ctrlKey:ctrl键
  • metaKey:meta键(mac系统是一个四瓣的小花,windows系统是windows键)
  • shiftKey:shift键

   var inpu = document.getElementById('input');
    var keyDown = function (e) {
        console.log(e.ctrlKey, '是否按下了ctrl键')
        console.log(e.altKey, '是否按下了alt键')
        console.log(e.metaKey, '是否按下了win键')
        console.log(e.shiftKey, '是否按下了shift键')
        console.log(e.key,'e.key返回一个字符串,表示按下的键名')

        // 这里要注意:keypress 事件中ctrlKey,altKey,shiftKey,metaKey事件是undefined
        // 在keydown 和 keyup事件中是true和false
    }
    inpu.addEventListener('keydown', keyDown, false);  // keydown事件,触发keyDoen监听函数

(5) key 属性

key属性返回一个字符串,表示按下的键名。

  • 如果同时按下一个控制键和一个符号键,则返回符号键的键名。
    比如,按下Ctrl+a,则返回a。
var inpu = document.getElementById('input');
    var keyDown = function (e) {
        console.log(e.key,'e.key返回一个字符串,表示按下的键名')
    }  // keypress事件的监听函数中,传入的参数keyboardEvent,没有ctrl,alt,meta,shift属性

inpu.addEventListener('keydown', keyDown, false);  // keydown事件,触发keyDoen监听函数




(四) 进度事件

进度事件用来描述一个事件进展的过程,比如XMLHttpRequest对象发出的HTTP请求的过程、<img>、<audio>、<video>、<style>、<link>加载外部资源的过程。下载和上传都会发生进度事件。
abort事件:当进度事件被中止时触发。如果发生错误,导致进程中止,不会触发该事件。

  • error事件:由于错误导致资源无法加载时触发。

  • load事件:进度成功结束时触发。

  • oadstart事件:进度开始时触发。

  • loadend事件:进度停止时触发,发生顺序排在error事件\abort事件\load事件后面。

  • progress事件:当操作处于进度之中,由传输的数据块不断触发。

  • timeout事件:进度超过限时触发。

image.addEventListener('load', function(event) {
  image.classList.add('finished');
});

image.addEventListener('error', function(event) {
  image.style.display = 'none';
});


上面代码在图片元素加载完成后,为图片元素的class属性添加一个值“finished”。

如果加载失败,就把图片元素的样式设置为不显示。

  • 有时候,图片加载会在脚本运行之前就完成,尤其是当脚本放置在网页底部的时候,因此有可能使得load和error事件的监听函数根本不会被执行。所以,比较可靠的方式,是用complete属性先判断一下是否加载完成。

  • 由于DOM没有提供像complete属性那样的,判断是否发生加载错误的属性,所以error事件的监听函数最好放在img元素的HTML属性中,这样才能保证发生加载错误时百分之百会执行。


<img src="/wrong/url" onerror="this.style.display='none';" />

这样写能保证,发生加载错误时,onerror事件百分百会执行

(1) 进度事件使用ProgressEvent对象表示

ProgressEvent实例有以下属性。

  • lengthComputable:返回一个布尔值,表示当前进度是否具有可计算的长度。如果为false,就表示当前进度无法测量。

  • total:返回一个数值,表示当前进度的总长度。如果是通过HTTP下载某个资源,表示内容本身的长度,不含HTTP头部的长度。如果lengthComputable属性为false,则total属性就无法取得正确的值。

  • loaded:返回一个数值,表示当前进度已经完成的数量。该属性除以total属性,就可以得到目前进度的百分比。




(五) 拖拉事件

拖拉指的是,用户在某个对象上按下鼠标键不放,拖动它到另一个位置,然后释放鼠标键,将该对象放在那里。

拖拉的对象有好几种,包括Element节点、图片、链接、选中的文字等等。在HTML网页中,除了Element节点默认不可以拖拉,其他(图片、链接、选中的文字)都是可以直接拖拉的。为了让Element节点可拖拉,可以将该节点的draggable属性设为true。

  • Element节点默认不可以拖拉,为了让Element节点默认可以拖拉,要将 draggable属性设为true
  • draggable属性可用于任何Element节点,但是图片(img元素)和链接(a元素)不加这个属性,就可以拖拉。对于它们,用到这个属性的时候,往往是将其设为false,防止拖拉。
  • 注意,一旦某个Element节点的draggable属性设为true,就无法再用鼠标选中该节点内部的文字或子节点了。

(六) 触摸事件

触摸API由三个对象组成。

  • Touch
    Touch对象表示触摸点(一根手指或者一根触摸笔),用来描述触摸动作,包括位置、大小、形状、压力、目标元素等属性。

  • TouchList
    有时,触摸动作由多个触摸点(多根手指或者多根触摸笔)组成,多个触摸点的集合由TouchList对象表示。

  • TouchEvent
    TouchEvent对象代表由触摸引发的事件,只有触摸屏才会引发这一类事件。

(七) 表单事件

(1)input事件 ----------- 输入时触发

input事件当<input>、<textarea>的值发生变化时触发。此外,打开contenteditable属性的元素,只要值发生变化,也会触发input事件。

input事件的一个特点,就是会连续触发,比如用户每次按下一次按键,就会触发一次input事件。

(2) select事件 ----------- 选中里面值时 触发

select事件当在<input>、<textarea>中选中文本时触发。

(3) Change事件 -------- 值改变且失去焦点时 触发,分下面三种情况

Change事件当<input>、<select>、<textarea>的值发生变化时触发。

  • 它与input事件的最大不同,就是不会连续触发,只有当全部修改完成时才会触发。
  • 而且input事件必然会引发change事件。具体来说,分成以下几种情况。
    激活单选框(radio)或复选框(checkbox)时触发。
    用户提交时触发。比如,从下列列表(select)完成选择,在日期或文件输入框完成选择。
    当文本框或textarea元素的值发生改变,并且丧失焦点时触发

(4) reset事件,submit事件

以下事件发生在表单对象上,而不是发生在表单的成员上。

  • (1) reset事件
    reset事件当表单重置(所有表单成员变回默认值)时触发。
  • (2) submit事件
    submit事件当表单数据向服务器提交时触发。注意,submit事件的发生对象是form元素,而不是button元素(即使它的类型是submit),因为提交的是表单,而不是按钮。

(八) 文档事件

(1) hashchange事件,popstate事件

以下事件与文档的URL变化相关。

(1) hashchange事件

hashchange事件在URL的hash部分(即#号后面的部分,包括#号)发生变化时触发。如果老式浏览器不支持该属性,可以通过定期检查location.hash属性,模拟该事件

  • hashchange事件对象除了继承Event对象,还有oldURL属性和newURL属性,分别表示变化前后的URL。

(2) popstate事件

popstate事件在浏览器的history对象的当前记录发生显式切换时触发。注意,调用history.pushState()或history.replaceState(),并不会触发popstate事件。该事件只在用户在history记录之间显式切换时触发,比如鼠标点击“后退/前进”按钮,或者在脚本中调用history.back()、history.forward()、history.go()时触发。

推荐阅读更多精彩内容

  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 2,010评论 1 10
  • 本节介绍各种常见的浏览器事件。 鼠标事件 鼠标事件指与鼠标相关的事件,主要有以下一些。 click 事件,dblc...
    许先生__阅读 762评论 0 3
  • 事件是一种异步编程的实现方式,本质上是程序各个组成部分之间的通信。DOM支持大量的事件,本节介绍DOM的事件编程。...
    许先生__阅读 201评论 0 3
  • 事件是一种异步编程的实现方式,本质上是程序各个组成部分之间的通信。DOM支持大量的事件,本节介绍DOM的事件编程。...
    周花花啊阅读 211评论 0 3
  • 我想和你不期而遇 想做个太阳温暖你 也想逢山开路 见水搭桥 也想遇到你 便是可以是尽头。
    DemonWGN阅读 30评论 0 0