Learn the Web from scratch JQuery (vii) event bubbling, event parameter object, chained programming principle

Hello everyone, here is "learn the Web series from scratch" and synchronize updates at the following address ...

• Github:https://github.com/daotin/web
• Public number: The top of the Web front
• Blog Park: http://www.cnblogs.com/lvonve/
• csdn:https://blog.csdn.net/lvonve/

Here I will start with the Web front End 0 Foundation, step-up learning web-related knowledge points, during the period will also share some fun projects. Now let's go to the Web Front end learning Adventure tour!

I. Event bubbling and blocking events bubbling

event bubbling: when an element triggers an event, it propagates the event to its parent element, always to the top level.

Block Event bubbling: add to the child elements of the triggered event return false; .

Second, the trigger of the event

The previously-described binding event is the event-handling process after the event is triggered, and the above event trigger is a passive event trigger, so how can I proactively trigger an event?

Gets the trigger of the focus event for the text box:

// 方式一文本框元素.focus();// 方式二文本框元素.trigger("focus");// 方式三文本框元素.triggerHandler("focus");

PS: Mode One and mode two, you can get the focus of the text box, and trigger the default behavior of the browser (cursor flashing), and in the way three, you can get the focus of the text box, but not trigger the browser's default behavior.

Iii. Event Parameter objects

Does the event handler function have parameters?

By arguement.length being able to get a parameter, this parameter is an object that has a lot of event-related properties.

Gets the key combination that the user pressed

    $(document).mousedown(function (e) {        if (e.altKey) {            console.log("alt按下了");        } else if (e.ctrlKey) {            console.log("ctrl按下了");        } else if (e.shiftKey) {            console.log("shift按下了");        } else {            console.log("鼠标按下");        }    });

Altkey, Ctrlkey, shiftkey when the corresponding key is pressed, the value of the corresponding event is true.

// 鼠标按下的键值e.button// 按键按下的键值e.keyCode// 触发该事件的目标对象，是一个 DOM 对象// 当发生事件冒泡的时候，可以定位到具体发生事件的源对象，而不是冒泡的对象。（比如：p在div里面，那么点击p触发的事件下，e.target 是写在div事件处理函数里面的，此时 e.target 是p对象。）e.target// 触发事件的当前的对象// （比如：p在div里面，那么点击p触发的事件下，e.currentTarget 是写在div事件处理函数里面的，此时 e.currentTarget 是div对象）e.currenyTarget// 代理的那个对象e.delegateTarget

Four, the principle of chain-type programming

Chained programming is an object that invokes a method and can continue to invoke a method. This requires the object to invoke the return value of the method or the object, so how is this method internally implemented?

It's very simple: it's the last object to return the call to. return this;just fine.

Another problem is that JQuery is in Val (); The values are read at all times without parameters, they cannot be chained, they are set when there are parameters, and can be programmed in chains.

So the internal implementation of the method, in return this; Make a decision before returning the calling object if there are parameters, otherwise it will not be returned.

Case: five-star praise

<!    DOCTYPE html>

Learn the Web from scratch JQuery (vii) event bubbling, event parameter object, chained programming principle