A more commonly used method under js, event function code.
A event flow (event flow)
Event models are divided into two types: bubbling events and capture events.
Bubbing (dubbed bubbling) events: refers to events that are triggered one by one in order from the most precise object to the least precise object.
Capturing event: It is the opposite of the bubbling event, which means that the events are triggered one by one in order from the least accurate object to the most accurate object.
Captured events are also called top-down (DOM level) event models.
Since IE browser does not support capture events, it is not widely used.
B event monitoring
i > Universal monitoring method
Example 1:
Copy code The code is as follows:
1 |
|
Example 2:
Copy code The code is as follows:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
|
This code achieves the separation of structure and behavior.
Add monitoring methods to the browser, which are divided into two types: monitoring methods in IE and standard DOM monitoring methods.
ii > Listening methods in IE
In IE browser, each element has two methods to handle event listening. They are: attachEvent() and detachEvent().
Attach event method: [object].attachEvent("event name", method name);
Detach event method: [object].detachEvent("event name", method name);
For example: o_p .detachEvent("onclick",click_A);
Example:
Copy code The code is as follows:
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 |
|
Note:
● Use this method to add multiple listening functions to the same element;
● In IE browser, the execution order of the functions is opposite to the order of function addition;
● In IE browser, although the function There is an order of execution, but they will all be called at the same time;
iii > Standard DOM listening methods
In browsers that use standard DOM, each element also has two methods to handle events. monitor. They are: addEventListener() and removeEventListener().
Add event listening method: [object].addEventListener("event name", method name, event model);
Remove event listening method: [object].removeEventListener("event name", method name, event Model);
Note:
The "event name" here cannot contain on, such as: click (if it is onclick, it is an error!)
The "event model" is of boolean type, usually set to false, that is, " "Bubble" event. (If true, it is a "capturing" event)
Example:
Copy code The code is as follows:
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 |
|
in It runs successfully under Firefox, but an error occurs under IE.
Note:
● You can also add multiple listening functions to the same element using this method;
● In the Firefox browser, the execution order of functions is consistent with the order of addition of functions (Firefox and IE are just the opposite );
● In the Firefox browser, the functions added in this way execute one and then the other (one by one);
C event object
i > in the IE browser , the event object is an attribute event of the window object. The access method is as follows:
Copy code The code is as follows:
1 2 3 |
|
The event object is accessed when the event occurs and disappears after the function is executed.
ii > In the standard DOM, the event object is obtained as the only parameter of the handler function. The access method is as follows:
Copy code The code is as follows:
1 2 3 |
|
Therefore, in order to be compatible with various browsers, the following method is usually used:
Copy code The code is as follows:
1 2 3 4 5 6 7 |
|
The following are some commonly used events Properties and methods (difference):
IE | 标准DOM | 说明 |
cancelBubble | cancelBubble | 是否冒泡(标准DOM中只读) |
无 | stopPropagation( ) | 阻止事件向上冒泡的方法 |
无 | charCode | 按下按键的Unicode 值 |
keyCode | keyCode | IE 中keypress 事件时表示按键的Unicode 值; 标准DOM 中keypress 事件时为0; 其余情况下,keyCode 为按键的数字代号。 |
srcElement | target | 触发事件的元素(对象源) |
type | type | 事件的名称 |
此处只列出了事件成员的一小部分。
注意:
在IE 浏览器中,获得触发事件的对象源(HTML标签)是通过event 对象的srcElement 属性;
在标准的DOM 中,获得触发事件的对象源(HTML标签)是通过event 对象的target 属性;
获取事件目标的示例:
复制代码 代码如下:
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 |
|
D 键盘事件
事件 | 说明 |
keydown | 按下键盘上的某个键触发。(一直按住某键则会持续触发) |
keypress | 按下某个按键并产生字符时触发。(即忽略Shift 、Alt 、Ctrl 等功能键) |
keyup | 释放某个按键时触发。 |
触发的顺序为:keydown ---> keypress ---> keyup
i > 关于keyCode属性和charCode 属性
keyCode属性: 表示键盘按键码。因此输入“a”字母和“A”字母时,都是显示键盘码 65 ;
charCode 属性:表示输入字符码。因此输入“a”字母和“A”字母时,
分别显示 97(a 字符码)和 65(A 字符码);
注意:
在标准的DOM 中:既有keyCode属性,还有charCode 属性。
但在标准的DOM 中,keypress 事件中keyCode 属性值始终为0 值;
在IE 浏览器中:事件对象只有keyCode属性,没有charCode 属性。
但在IE 浏览器中,keypress 事件中的keyCode 属性值等同于标准DOM 中的charCode 属性的值;
示例代码:
复制代码 代码如下:
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 |
|
ii > 屏蔽鼠标右键
方法一:
通过鼠标事件中,判断event 对象的button 属性值为“2”来屏蔽鼠标右键。虽然这种方法在IE 浏览器中有效,但在标准的DOM 中无效。并且,鼠标事件中,button 属性的值在IE 浏览器和标准的DOM 中大部分都不相同!
方法二:
其实,点击鼠标右键会触发右键菜单contextmenu 事件。
所以,屏蔽鼠标右键最有效的办法就是屏蔽document 对象的contextmenu 事件。
代码如下:
复制代码 代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
|
IE 浏览器是通过returnValue 属性屏蔽右键菜单;
标准DOM 是通过preventDefault( ) 方法屏蔽右键菜单;
iii > 自定义鼠标右键菜单
代码如下:
复制代码 代码如下:
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 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
|
在IE 浏览器和标准DOM 下兼容。
以上就是关于JavaScript 的事件综合分析_javascript技巧的内容,更多相关内容请关注PHP中文网(www.php.cn)!