jQuery event object

Using jQuery event objects

Using events naturally requires event objects. Because the acquisition of event objects and the properties of event objects are different between different browsers, it is difficult for us to use event objects across browsers.

The event object is unified in jQuery. When binding the event processing function, the event object formatted by jQuery will be passed in as the only parameter:

$("#testDiv").bind("click", function(event) { });

Detailed description of the event object, You can refer to the jQuery official documentation: http://docs.jquery.com/Events/jQuery.Event

jQuery event object merges the differences between different browsers. For example, it can be used in all browsers through event. target attribute to get the trigger of the event (to use the native event object in IE, you need to access event.srcElement).

The following are the properties that the jQuery event object can support in the browser:

The above are the events provided in the jQuery official documentation The properties of the object, the properties supported by multiple browsers are also provided below:

##Event objects not only have properties, but also have events. There are some events that will definitely be used, such as canceling bubbling stopPropagation(), etc. The following is a list of functions of the jQuery event object:

Among these functions, stopPropagation() is the most commonly used one and will definitely be used. function. It is equivalent to operating event.cancelBubble=true on the original event object to cancel bubbling.

Next Section

new file

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
 <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
 <script type="text/javascript">
 $(function() {
 $("a").click(function(event) {
 alert(event.type); //获取事件类型（此处弹出 click）
 alert(event.target.href); //获取触发事件的元素的 href 属性值
 alert("当前鼠标坐标：" + event.pageX + ", " + event.pageY); //获取鼠标当前坐标
 event.preventDefault(); //阻止链接跳转
 });
 });
 </script>
</head>

<!-- HTML -->
<body>
<a href="http://www.google.com/">Google</a>
</body>
</html>

submit Reset Code

Automatic operation

Full Screen