Javascript事件的入门知识

Javascript事件是用户访问Web页面引起的一系列操作;

例如,用户单击;当用户执行某些操作时,用户执行一系列代码。

对事件的介绍



事件通常用于浏览器和用户操作之间的交互。他们第一次出现在伊江和Netscape导航器是共享服务器负载的一种方式。

的DOM2级规范开始尝试以逻辑方式DOM事件规范;

IE9 / / / Firefox Opera Safari和Chrome已经完全实现的核心部分DOM2级事件模块。

浏览器仍采用其专有的事件模型在IE8;

在Javascript三种事件模型:内联模型/脚本模型和DOM2模型;

两个内联模型(HTML事件处理程序)

这个模型是处理事件的最传统和最简单的方法。

在内联模型中,事件处理函数是HTML标签的属性,它用于处理指定的事件;

虽然内联在早期使用得更多,但它与HTML混合,并没有从HTML中分离出来;

在HTML中,事件处理函数被用作执行js代码的属性。

注意单引号和双引号。

在HTML中,事件处理函数被用作执行js函数的属性;

js的执行功能;

PS:功能不应该放在在window.onload,所以它不能被看见。

三脚本模型(dom0级别的事件处理程序)






由于违反了html/内联模型和Javascript代码级分离原则;
我们可以处理Javascript中的事件,脚本模型是这样吗;
无功输入= document.getelementsbytagname(输入的){ 0 }; / /输入对象;
(input.onclick =功能){ / /匿名函数;
警报('lee);
}
通过匿名函数,可以直接触发相应的代码;
可以通过指定函数名分配方法来执行函数(赋值函数名称不带括号);
input.onclick =箱; / /指定事件处理程序的匿名函数;
input.onclick = null; / /删除事件处理程序;


四事件处理函数



可以处理事件中的事件:鼠标/键盘事件;

Javascript事件处理函数及其使用列表

当受事件处理函数影响的元素出现时

onabort图像时,图像加载中断;

onblur窗/框架/所有的表单对象当焦点离开对象;

变化的输入框/选择框或文本字段时,一个元素的值被改变,失去了焦点;

单击链接/按钮/形式/图像等对象,当用户单击对象;

鼠标双击链接/按钮/表单对象当用户双击对象;

ondragdrop窗口,当用户拖动一个对象浏览器窗口;

OnError窗/框架/所有的表单对象脚本中出现语法错误时;

onfocus窗/框架/所有形式的对象时,单击鼠标或聚焦鼠标移动到窗口或框架;

onkeydown文件/图像/链接/形式的键被按下时;

键盘文件/图像/连接/形式时,按下和松开按键;

onkeyup文件/图像/链接/形式时,松开钥匙;

在载体 / /图像框架集文档或图像加载;

在卸载文件体/框架集文档或框架集卸载;

当删除链接时链接图标;

当链接,当鼠标移动到链接;

该ONMOVE窗口当浏览器窗口移动;

复位按钮点击的OnReset形式形式的复位按钮;

onresize窗口变小时浏览器窗口时;

onselect表单元素当选择一个对象;

onsubmit形式向服务器发送的形式时;

对于每个事件,它触发了作用域和模式,事件处理将失败;

1。鼠标事件,页面的所有元素都可以触发。



(1)单击:当用户单击鼠标按钮或按下返回键时;

input.onclick =函数(){

警报('lee);

};

(2)。Dblclick:当用户双击鼠标按钮来触发;

input.ondblclick =函数(){

警报('lee);

}

(3)。Mousedown:当用户按下鼠标并没有启动触发;

input.onmousedown =函数(){

警报('lee);

}

(4)触发MouseUp:当用户释放鼠标按钮;

input.onmouseup =函数(){

警报('lee);

}

(5).mouseover:触发器,当鼠标移动到某个元素。

input.onmouseover =函数(){

警报('lee);

}

(6)Mouseout:当鼠标移出触发某个元素。

input.onmouseout =函数(){

警报('lee);

}

(7)。Mousemove:触发时,鼠标指针移动的元素;

input.onmousemove =函数(){

警报('lee);

}

2。键盘事件



(1)。keyDown:当用户按下键盘上的任意键触发,如果持有,将重复触发;

化函数(){

警报('lee);

}

(2)。按键:当用户按下键盘上的字符键触发,如果持有,将重复触发;

键盘=函数(){

警报('lee);

}

(3)。Keyup:当用户释放键盘上的键的;

onkeyup =函数(){

警报('lee);

}

3.html事件



(1)加载:当页面被完全加载(包括所有外部资源(如Javascript文件/ CSS文件)时,窗口上的负载事件将被触发。

在window.onload =函数(){

警报('lee);

}

上面的图像也可以触发加载事件,无论它是DOM中的图像元素的图像元素还是HTML中的图像元素;

因此 /可以HTML的任何图像指定onload事件处理程序;



在下载之前,新的图像元素不会被添加到文档中,只要下载开始设置SRC属性;

元素也将触发加载事件,以允许开发人员确定动态加载Javascript文件是否加载;

具有不同设置的图像,仅在元素的SRC属性中并将其添加到文档中,将开始下载Javascript文件;

(2)卸载:当文档完全卸载并触发时;

只要用户从一个页面切换到另一个页面,就会有卸载事件;

使用此事件,而是最清楚的引用,以避免内存泄漏;

window.onunload =函数(){

警报('lee);

}

(3)选择:触发,当用户选择文本框(输入或文本)更改内容和失去焦点。

input.onselect =函数(){

警报('lee);

}

(4)。变化:被触发时,文本框中的内容(输入或文本)的变化和失去焦点。

input.onchange =函数(){

警报('lee);

}

(5)焦点:当页面或元素聚焦于窗口和相关元素时触发:此事件不冒泡;

input.onfocus =函数(){

警报('lee);

}

(6)Blur:当页面或元素失去对窗口和相关元素的关注时触发;这个事件不是冒泡的;

input.onblur =函数(){

警报('lee);

}

(7)提交:当用户单击提交按钮在元素上触发时;

form.onsubmit =函数(){

警报('lee);

}

(8)重置:当用户单击重置按钮在元素上触发时;

form.onreset =函数(){

警报('lee);

}

(9)调整大小:当浏览器窗口调整到一个新的高度或宽度时触发调整大小事件。

触发器上的窗口(窗口)中的事件;浏览器窗口最大化或最小化将触发调整大小事件;

浏览器中的Chrome和Opera将连续更改事件大小;

Firefox只有当用户停止调整窗口大小时才会触发调整大小事件;

window.onresize =函数(){

警报('lee);

}

(10)滚动条:当用户滚动滚动条的元素以触发;

window.onscroll =函数(){

警报('lee);

}