js事件触发操作实例分析

本文实例讲述了js事件触发操作。分享给大家供大家参考，具体如下：

click包含了（mousedown,mouseup）叫做MouseEvents；
keydown,keypress,keyup之流叫做UIEvents;
focus，load,scroll，submit之流叫做HtmlEvents。

MutationEvents，突变事件，往往用于对DOM对象的事件监听。
DOMNodeRemoved：当Node被删除时
DOMAttrModified：元素的属性发生改变时

我们来学一学事件触发

var e = document.createEvent("HtmlEvents");
e.initEvents("事件名",true,true);
元素对象.dispatchEvent(e);

createEvent:创建事件
initEvent：初始化事件
dispatchEvent：调度、发出事件

<!DOCTYPE html>
<html>
<head>
  <title>www.jb51.net 事件触发</title>
  <meta charset="utf-8">
</head>
<body>
  <select id="sel">
    <option>中国</option>
    <option>美国</option>
    <option>日本</option>
    <option>韩国</option>
  </select>
  <hr>
  <div id="div" style="width:300px;height:150px;border:solid 1px red;"></div>
  <script type="text/javascript">
    var sel = document.getElementById("sel");
    var div = document.getElementById("div");
    // 设置change事件后处理函数
    sel.onchange = function(){
      div.innerHTML = sel.options[sel.selectedIndex].text; //拿到选中的option的文本填充到div里
    }
    // 触发change事件的函数
    function dispatchChange(){
      var changeEvent = document.createEvent("HtmlEvents");
      changeEvent.initEvent("change",true,true);
      sel.dispatchEvent(changeEvent);
    }
    dispatchChange();
  </script>
</body>
</html>

运行结果：

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

PS：关于javascript事件说明可参考本站javascript事件与功能说明大全：http://tools.jb51.net/table/javascript_event

更多关于JavaScript相关内容可查看本站专题：《JavaScript事件相关操作与技巧大全》、《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

赞 (0)

相关推荐

  • js活用事件触发对象动作

    从学习W3C标准以来,对于代码我好像养成了一种怪癖,能统一复用的,就不会多写一点东西,这样前台页面代码看起来会清爽很多,而效率也会成直线上升. 复制代码 代码如下: <script type="text/javascript"> <!-- //定义鼠标触发事件的范围 function findOutDiv(thisEvent){ //利用循环查找符合CSS样式名字的对象     while(thisEvent.className != "piccell&qu

  • javascript 不让鼠标事件触发

    div上加了onclick事件,里面又有超链a,点超链的时候能不触发div 的事件吗? 我们 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • js获取事件源及触发该事件的对象

    某Html元素有onclick方法:onclick='return myfunction(event)' 复制代码 代码如下: function myfunction(event) { event = event ? event : window.event; var obj = event.srcElement ? event.srcElement : event.target; //这时obj就是触发事件的对象,可以使用它的各个属性 //还可以将obj转换成jquery对象,方便选用其他元素

  • js触发onchange事件的方法说明

    js中onchange事件是在客户端改变输入控件的值,比如一个textbox,会出发的一个事件.但是如果在js代码中改变一个textbox的value,而不是通过键盘输入改变一个textbox值的话,是不会出发onchange事件的. 那么,如何在js代码模式通过代码触发textbox控件的onchange事件呢,经过查阅资料,发现js提供了一个方法,可以触发控件的应该是所有事件.object.fireEvent()方法,使用方法如 object.fireEvent('onchange'),即可

  • js 触发select onchange事件代码

    select 或text的onchange事件需要手动(通过键盘输入)改变select或text的值才能触发,如果在js中给select或text赋值,则无法触发onchang事件, 例如,在页面加载完成以后,需要触发一个onChange事件,在js中用document.getElementById("province").value="湖北";直接给select或text赋值是不行的,要想实现手动触发onchange事件,需要在js给select赋值后,加入下面的

  • javascript下对于事件、事件流、事件触发的顺序随便说说

    javascript下对于事件、事件流、事件触发的顺序随便说说

    1.首先我们来了解几个概念,"事件","事件流","事件名称","事件处理函数/事件监听函数,也许是"老生常谈",知道的朋友可以越过. 事件: 事件是用户自身或浏览器进行的特定行为.如:用户点击 也就是常用的click事件 事件流:多个事件 按一定顺序触发 形成了事件流 事件名称:如上面所讲的click就是事件名 事件处理函数/事件监听函数(Dom的叫法)就是 事件触发后的处理函数,如obj.onclick=fn;函

  • js实现浏览器窗口大小被改变时触发事件的方法

    本文实例讲述了js实现浏览器窗口大小被改变时触发事件的方法.分享给大家供大家参考.具体分析如下: 当浏览器的窗口大小被改变时触发的事件window.onresize 为事件指定代码: 复制代码 代码如下: window.onresize = function(){ } 例如: 浏览器可见区域信息: 复制代码 代码如下: <span id="info_jb51_net">请改变浏览器窗口大小</span> <script> window.onresiz

  • javascript 动态改变onclick事件触发函数代码

    javascript 动态改变onclick事件触发函数代码 function oc() { alert("原本的方法"); } function od() { alert("我改变方法了."); } function of() { document.getElementById('name').onclick = function(){ od(); }; } 原来的方法 通过点击,改变原来的方法的执行 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • javascript的事件触发器介绍的实现

    事件触发器从字面意思上可以很好的理解,就是用来触发事件的,但是有些没有用过的朋友可能就会迷惑了,事件不是通常都由用户在页面上的实际操作来触发的吗?这个观点不完全正确,因为有些事件必须由程序来实现,如自定义事件,jQuery的ajax框架的一些自定义事件就必须由事件触发器来实现.当然,在一些特殊情况下,用事件触发器来触发事件比用户的实际操作来触发事件更方便. 对于实现事件触发器,浏览器都有原生的方法来支持,但是在兼容性上又有很大的出入,这种兼容性的问题完全在意料之中,IE有自己的方法,其他标准浏览

  • 代码触发js事件(click、change)示例应用

    Chrome , Firfox 不支持fireEvent的方法 可以使用dispatchEvent的方法替代, 直接给一个兼容的Code. 触发click 事件 复制代码 代码如下: function simulateClick(el) { var evt; if (document.createEvent) { // DOM Level 2 standard evt = document.createEvent("MouseEvents"); evt.initMouseEvent(&

随机推荐