浏览器DOM事件触发

本文详细介绍了如何使用JavaScript脚本触发事件,包括创建事件、分发事件到目标元素以及触发事件处理函数的过程。通过一个下拉选择框的示例,演示了如何用脚本模拟用户交互,触发change事件。

除用户人为交互触发事件外,用js脚本触发事件的一般流程为

  1. 创建事件 var e = Event('event_name', {key: value, ...})
  2. 分发事件到 event.target
  3. 触发事件处理函数 EventHandler

示例

<select >
    <option value="all" selected>all</option>
    <option value="active">active</option>
    <option value="completed">completed</option>
</select>
<script>
    let select = document.getElementsByTagName('select')[0];
    select.onchange = handleChange;
    function handleChange(e){
        console.log('changed');
    }
</script>

如上脚本中的 change 事件脚本触发的方式如下:

var e = Event('change', {bubbles: true});
select.options[1].dispatchEvent(e);

转载于:https://www.cnblogs.com/zhaofeng-shu33/p/10351963.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值