<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>代码主动触发事件</title>
<style>
* {
margin: 0
}
#father {
width: 400px;
height: 400px;
display: flex;
justify-content: center;
align-items: center;
background-color: pink;
}
#son {
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div id="father">
<div id="son">我是son的div哦</div>
</div>
<input type="text" id="userInput">
<script src="./js/jquery3.6.0.js"></script>
<script>
// js事件触发
// 绑定事件
// let father = document.getElementById('father')
// let son = document.getElementById('son')
// father.onclick = function () {
// console.log('father...');
// }
// son.onclick = function () {
// console.log('son...');
// }
// // js实现事件主动触发
// // 方式一: onclick() - 不冒泡 -只是函数被调用,并不是真正的执行事件
// son.onclick()
// // 方式二 创建一个自定义事件 new CustomEvent() 参数一: 事件类型 参数二是一个对象 {bubbles:true} 是否允许冒泡
// let event = new CustomEvent('click',{bubbles:true})
// son.dispatchEvent(event)
// jq实现事件主动触发
$('#father').on('click',function () {
console.log('father');
})
$('#son').on('click',function () {
console.log('son');
})
// 方式1: click() - 内部帮我们封装了冒泡 (可以冒泡)
$('#son').click()
// 方式二 trigger() 参数一 事件类型 (可以冒泡)
$('#son').trigger('click')
// 方式三 triggerHandler() 参数一 事件类型 (不可以冒泡)
$('#son').triggerHandler('click')
// 场景: 注册页面, 一进入页面, 直接输入框聚焦
$('#userInput').on('focus',function () {
console.log('光标被聚焦了..');
})
// $('#userInput').trigger('focus')
$('#userInput').triggerHandler('focus')
// trigger 和triggerHandler的区别
// tirgger 可以冒泡 会触发事件的默认欣慰
// triggerHandler不能冒泡 阻止事件的默认行为
</script>
</body>
</html>
6166
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
