JQuery event delegation-Safari: jquery delegation-safari

JQuery event delegation-Safari: jquery delegation-safari

What is event Delegation

Event delegation is an event binding method in Jquery. Unlike common event binding methods, events are bound to the target element, instead, the event is bound to the parent element and the binding function is executed through event bubbles.

// Common event binding (Jquery) $ (element ). click (function () {// do something}) // event Delegate (Jquery) $ (parents ). on ("click", element, function () {// do something })

Principle of event Delegation

Event Delegate binds event listening to the parent level of the target element. When the target element responds to the event, it bubbles to the parent level of the event to be bound, determine whether the target element of the event is an input element. If yes, execute the input function.

// Simple Jquery event DeleGate <ul id = "oParent"> </ul> <a id = "oClick" href = "javascript: void (0) "> click </a> <script type =" text/javascript "> var oParent = document. getElementById ("oParent"), oClick = document. getElementById ("oClick"); Object. prototype. on = function (ev, fn, obj) {var sClass = Object. prototype. toString. call (obj); if (obj | sClass. indexOf ("HTML") ===- 1) {// pretend to determine whether the event is required to delegate this. addEventListener (ev, function (e) {var e = e | {%event=if(e.target%%%%%obj&e.type=%%ev%%%fn.call(e.tar get); // input target element }}, false);} else {this. addEventListener (ev, fn, false) ;}} document. on ("click", function () {console. log (this)}, oClick );

We didn't do any compatibility or other processing, just to understand the principle, you can leave a message to point out any questions.
What is the purpose of event delegation?

What is the purpose of event delegation when talking about so many things? I think the biggest benefit of event delegation is that dynamically generated elements still retain the original event binding.

// When you click a, ul will add a new li, the newly added li has a binding event <ul id = "oUl"> <li> </ul> <a id = "addBtn" href = "javascript: void (0) "target =" _ self "> added li </a> <script> // use common event binding implementation $ (" # oUl "). find ("li "). on ("click", function () {// do something}) $ ("# addBtn "). on ("click", function () {$ ("# oUl "). append ("<li> </li>"); $ ("# oUl "). find ("li "). on ("click", function () {// do something}) // do not talk about performance problems first, so as to achieve beautiful performance, is it logical? // use event Delegate to implement $ ("document "). on ("click", "# oUl li", function () {// The delegate element here is flexible, as long as it is a parent, it's just not dynamic generation (dynamic generation loses the meaning of event delegation) // do something}) $ ("# addBtn "). on ("click", function () {$ ("# oUl "). append ("<li> </li>") ;}// this code is much more concise and solves the problem of repeated binding.

Today's theme, event Delegate-Sarfari

If a problem occurs in a project, the click event Delegate fails on the mobile safari.

<P class = "loadmore"> load more </p> <script type = "text/javascript"> $ (document ). on ("click ",". loadmore ", function () {alert (" OK ")}) </script>

Look at the code above. It's easy. It's okay. Except for safari on ios, other browsers can bring up "OK" normally ", at first, I thought about whether there was something to block the bubble, but I couldn't find it. The question of jq ?, I still cannot change it. Normal binding (without event delegation) is okay. Other ideas will be about jq bugs. If it is a jq bug, there will be similar bugs in previous projects, so I went online to find the relevant code.

<a id="test" target="_slef" href="javascript:void(0)">test</a><script>$("document").on("click","#test",function(){//do something})</script>

There is no problem in testing on Android and ios devices, and the code is almost the same, but you have noticed that the labels are different (html semantics is important), so you can replace p with, solve the problem perfectly, and finally go to Google.

In safari of ios, when a click event is added to an element by Delegate, if the event is delegated to a document or body, and the delegate element is not clickable by default (such as div, in this case, the click event fails.

The reason is clear. The click events of non-clickable elements in safari will not bubble to the document and body.

Solution

1. Bind the click event directly to the element (do not use event delegation)

2. You need to bind the click Event element to a clickable element such as <a> or <button>.

3. Delegate the click event to a non-doucument or body parent element.

4. Add a css style cursor: pointer to the target element (recommended for ease of operation)

The above is the jQuery event entrusted Safari introduced by xiaobian. I hope it will be helpful to you. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!