Examples of common jQuery event functions
bind( type, [data], fn ) Function example
bind() is the most commonly used function. Pay attention to the data parameter in the method signature. You can pass some additional data before event processing:
function handler(event) {
alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler)Pay attention to the use of event parameters. The event object is unified in jQuery and the event object is passed as the only parameter of the event processing function.
data We also need to access the parameters through event.data. Why do we need to provide data parameters?
Because we often encounter such problems: We hope to perform special processing based on certain data from the event source during event processing.
There are currently two controversial solutions on the Internet:
(1) Use custom element attributes to store data.
For example:
<div id="testDiv5" customer="customer data 1">获取自定义数据-1</div>
Get data in the event processing function:
$("#testDiv5").bind("click", function(event) { alert($(event.target).attr("customer")); });attr function is the knowledge from the previous lecture, used to get the "element attributes" of the element, and can get customized element attributes. Click After the div it will be displayed:
(2) Use a script to pass data to the event processing function:
<div id="testDiv6">获取自定义数据-2</div>
The element does not have any custom attributes. When adding the event handler, additional data will be passed:
$("#testDiv6").bind("click", { customer: "customer data 2" }, function(event) { alert(event.data.customer) });The result after clicking the div is the same as method 1:
Method 1 is convenient for storing and searching data. However, custom attributes cannot be verified by W3C.
Method 2 must find a way to store the data yourself, and Develop rules to find data for specified elements.
From a "developer's" perspective, method 1 is simpler and more intuitive. However, the shortcomings are serious. So please decide for yourself how to choose.
one( type , [data], fn) The function is the same as bind, but it is only executed once.
2. trigger(event, [data]) and triggerHandler(event, [data])
Although Elements are bound to certain events, such as click, but sometimes you want to trigger these events in the program. These two functions can achieve this function.
The main difference is that trigger will trigger the browser's default action, while triggerHandler It will not start.
The two functions can be clearly distinguished through the following example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>jQuery事件处理:trigger和triggerHandler示例</title>
script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(function()
{
$("#old").click(function()
{
$("#divResult").html("");
$("input").trigger("focus");
});
$("#new").click(function()
{
$("#divResult").html("");
$("input").triggerHandler("focus");
});
$("input").focus(function() { $("<span>Focused!</span>").appendTo("#divResult"); });
})
</script></head><body>
<button id="old">
.trigger("focus")</button>
<button id="new">
.triggerHandler("focus")</button><br />
<br />
<input type="text" value="To Be Focused" />
<div id="divResult"></div>
</body>
</html>When the ".trigger" button is clicked, Focused will be called twice, and the input element will be Focused:
When the ".triggerHandler" button is clicked, it is only called once, and the input element does not gain focus:
In other words, the trigger function triggers the browser's default behavior of obtaining focus, allowing the input element to gain focus, so focus is called again Event handling function.
triggerHandler only calls the event handling function bound to the focus event and does not trigger browser behavior, so the final input element does not gain focus.
![Front-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Zero-based front-end course [Vue advanced learning and practical application]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![WEB front-end tutorial [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Apipost practical application [api, interface, automated testing, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
