JavaScript MVC 进修笔记（五）事宜操纵的拓展

2019年8月26日 185次阅读 来源: JingDing

事宜对象

event 对象还包含许多有用的属性。W3C 范中包含的大部分属性都列在下面，更多信息参照完全的规范规范。

事宜范例：

  • bubbles ：布尔值，示意事宜是不是经由过程DOM 以冒泡情势触发。

事宜发作时，反应当前环境信息的属性：

  • button ：示意（如果有）鼠标所按下的按钮。
  • ctrlKey ：布尔值，示意Ctrl 键是不是按下。
  • altKey ：布尔值，示意Alt 键是不是按下。
  • shiftKey ：布尔值，示意Shift 键是不是按下。
  • metaKey ：布尔值，示意Meta 键是不是按下。

示意键盘事宜的属性：

  • isChar ：布尔值，示意当前按下的键是不是示意一个字符。
  • charCode ：示意当前按键的unicode 值（仅对keypress 事宜有用）。
  • keyCode ：示意非字符按键的unicode 值。
  • which ：示意当前按键的unicode 值，不论当前按键是不是示意一个字符。

事宜发作时的环境参数：

  • pageX，pageY ：事宜发作时相对于页面（如viewport 地区）的坐标。
  • screenX，screenY ：事宜发作时相对于屏幕的坐标。

和事宜相干的元素：

  • currentTarget ：事宜冒泡阶段地点的当前DOM 元素。
  • target,originalTrget ：原始的DOM 元素。
  • relatedTarget ：其他和事宜相干的DOM 元素（如果有的话）。

差别的浏览器对这些属性的兼容性也差别，尤其是那些不兼容W3C 的浏览器。

事宜库

手动处置惩罚浩瀚浏览器的差异性吃力不讨好。jQuery 的API 供应了bind()函数用来跨浏览器绑定事宜监听。在一个jQuery 实例上挪用此函数，传入事宜称号和回调函数：

jQuery("#element").bind(eventName, handler);

给一个元素注册点击事宜：

jQuery("#element").bind("click", function(event) {
    // ...
});

jQuery 供应了一些常常运用事宜的快速要领，比方click、submit 和mouseover：

$("#myDiv").click(function(){
// ...
});

注重: 运用这个要领之前要确保DOM 元素是存在的。比方，应当在页面载入完成后绑定事宜，因而须要绑定window 的load 事宜，然后增加监听：

jQuery(window).bind("load", function() {
    $("#signinForm").submit(checkForm);
});

比监听window 的load 事宜更好的要领，即DOMContentLoaded。当DOM 构建完成时触发这个事宜，这时候图片和样式表能够还未加载终了。这也就是说这个事宜肯定会在用户和页面发生交互之前触发。并非一切的浏览器都支撑DOMContentLoaded，因而jQuery 将它融入了ready() 函数，这个函数是兼容各个浏览器的：

jQuery.ready(function($)){
    $("#myForm"). bind("submit", function(){ /*...*/});
});

实际上，能够不必ready() 函数而直接将回调函数写入jQuery 对象。

jQuery(function($){
    // 当页面内容可用时挪用
});

切换上下文

关于事宜有一点常常让人觉得疑惑就是挪用事宜回调函数时上下文的切换。当运用浏览器内置的addEventListener() 时，上下文从局部变量切换为目的HTML 元素：

new function(){
    this.appName = "wem";

    document.body.addEventListener("click", function(e){
        // 上下文发作转变，因而appName 是undefined
        alert(this.appName);
    }, false);
};

要想对峙原有的上下文，须要将回调函数包装进一个匿名函数，然后定义一个援用指向它。即运用代办函数来对峙当前的上下文。这在jQuery 中也是一种很常常运用的形式，包含一个proxy() 函数，只需将指定的上下文传入函数即可：

$("signinForm").submit($.proxy(function(){ /* ... */ }, this));

自定义事宜

除了浏览器内置的事宜以外，也能够触发和绑定自定义事宜。这是架构库的一个好要领——也是jQuery 的大多数插件所运用的形式。大多数浏览器厂商均未完成W3C 规范中的自定义事宜，能够运用诸如jQuery 或Prototype 的类库来运用这个特征。jQuery 中能够运用trigger() 函数来触发自定义事宜。能够经由过程定名空间的情势来治理事宜称号，定名空间中的单词用点号分开，比方：

// 绑定自定义事宜
$(".class").bind("refresh.widget",function(){});

// 触发自定义事宜
$(".class").trigger("refresh.widget");

经由过程给trigger() 传入一个分外的参数来给事宜处置惩罚顺序传入数据。数据会以附加参数 的情势带入回调：

$(".class").bind("frob.widget", function(event, dataNumber){
    console.log(dataNumber);
}); 

$(".class").trigger("frob.widget", 5);

和内置事宜一样，自定义事宜同样会沿着DOM 树做冒泡。

（公然纪录进修JS MVC，不知道能对峙多久= =。以《基于MVC的JavaScript web富运用开辟》为重要进修材料。）

    原文作者：JingDing
    原文地址: https://segmentfault.com/a/1190000002581115
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞