【Javascript Day18】
目录
标签事件绑定的属性参数
阻止默认行为
dialog的实现及组织冒泡（捕获）传递
基于冒泡的事件委托
键盘事件的事件源对象信息
JS的自动触发操作
标签事件绑定的属性参数
<!-- 标签上的事件绑定，事件源对象通过 关键字event传递 -->
<!-- 标签上的事件绑定，事件源对象通过 关键字this传递 -->
<input type="button" value="事件绑定" οnclick="funA(event,this)">
<input type="button" value="事件绑定" id="btn1">
<input type="button" value="事件绑定" id="btn2">
<script>
function funA(e,dom){
console.log(e);
// console.log(this);
console.log(dom);
}
// JS为元素绑定事件，默认只有一个参数，该参数是事件对象
// JS为元素绑定的事件，在方法中this关键字，表示当前事件绑定的DOM对象
var btnDom1 = document.querySelector("#btn1");
btnDom1.onclick = function(e){
console.log(e);
console.log(this);
}
var btnDom2 = document.querySelector("#btn2");
btnDom2.addEventListener("click",function(e){
console.log(e);
console.log(this);
})
阻止默认行为
<!--
默认行为：标签在不使用任何JS代码的情况下，就存在功能
阻止默认行为：让标签自带的功能失效
-->
<a href="https://www.baidu.com" οnclick="showTip()">百度</a>
<script>
function showTip(){
alert(1)
}
</script>
<hr>
<a href="javascript:void(0)">为元素默认行为关键属性取值 javascrip:void(0)</a>
<hr>
<a href="https://www.baidu.com" οnclick="return false">为元素默认行为对应事件，绑定return false</a>
<hr>
<a href="https://www.baidu.com" οnclick="printMsg(event)">为元素默认行为对应事件回调，通过事件对象的preventDefault() 代码</a>
<script>
function printMsg(e){
console.log("msg",e);
e.preventDefault();
}
</script>
dialog的实现及组织冒泡（捕获）传递
<input type="button" value="页面的操作" οnclick="showTip()">
<input type="button" value="打开弹窗" οnclick="openDialog()">
<div class="dialog" id="a" οnclick="closeDialog(event)">
<div class="content" οnclick="stopFun(event)">
<input type="text">
<input type="button" value="关闭" οnclick="closeDialog(event)">
</div>
</div>
<script>
function showTip(){
alert(11)
}
var aDialog = document.querySelector("#a");
function openDialog(){
aDialog.style.display = "block";
}
function stopFun(e){
// 方案2：使用事件对象的专用阻止冒泡(捕获)方法完成回调执行停止操作 stopPropagation()
// stopPropagation()表示将冒泡或者捕获方法停止在当前方法上
e.stopPropagation();
}
function closeDialog(e){
console.log(e);
// 方案1：限定关闭功能只能由绑定事件的元素自身完成
// if(e.currentTarget===e.target){
// aDialog.style.display = "none";
// }
// e.stopPropagation();
aDialog.style.display = "none";
}
</script>
基于冒泡的事件委托
<input type="button" value="addItems" οnclick="addItems()">
<ul id="list" οnclick="execUlFun(event)">
</ul>
<script>
// 事件代理|事件委托
// 将多个子元素的事件基于事件冒泡机制，交给父元素绑定并完成执行
// 优点：减少资源占用->提高运行效率
// 缺点：功能逻辑会比较复杂
var tagNames = ["LI","SPAN"]
function execUlFun(e){
// console.log("ul的点击事件",e.target,e.currentTarget);
console.log("ul的点击事件-DOM对象",e.target);
// console.dir(e.target)
// if(e.target.tagName=="LI"){
// console.log("ul的点击事件-内容",e.target.innerHTML);
// }
if( tagNames.includes(e.target.tagName) ){
// console.log("ul的点击事件-内容",e.target.innerHTML);
// 具体的业务逻辑需要具体的分析
console.log("ul的点击事件-内容",e.target.innerText,e.target,e);
}
}
var ulDom = document.querySelector("#list");
function addItems(){
for (var i = 0; i < 10; i++) {
var li = document.createElement("li");
li.classList.add( "item" );
var span = document.createElement("span");
let text = Math.random();
span.innerHTML = text
li.appendChild(span);
// JS规则中每个元素绑定的事件，都是需要浏览器进行实际功能的监听的
// li.onclick = function(){
// console.log(text,this);
// }
ulDom.appendChild(li);
}
}
</script>
键盘事件的事件源对象信息
<!--
onkeypress 被弃用，目前新版本空格键数值键可以用
输入法无法触发
-->
<input type="text" οnkeydοwn="downFun()" οnkeypress="pressFun()" οnkeyup="upFun()">
<script>
function downFun(){
console.log("被按下down");
}
function pressFun(){
console.log("被按下press");
}
function upFun(){
console.log("弹起up");
}
</script>
<hr>
<!--
融合事件：有两个或以上的事件行为组成的事件
+ click : 左键按下和左键弹起
+ input : 键盘按下和键盘弹起
-->
<input type="text" οninput="inputUserWord()">
<script>
function inputUserWord(){
console.log("有值输入");
}
</script>
<hr>
<!--
键盘事件的三种场景
1. 为可接收输入值的元素完成绑定 - 直接可以使用
2. 为不可接收输入值的元素定义contenteditable属性，开启输入功能，并完成键盘事件绑定
3. 直接为window对象绑定键盘事件，只要是在当前页面中执行就会触发
-->
<textarea οnkeydοwn="printEvent(event)"></textarea>
<script>
function printEvent(e){
console.log(e);
// 按键内容
console.log(e.key);
// 按键内容的ASCII编码 - 弃用
console.log(e.keyCode);
}
</script>
<div class="box" οnkeydοwn="printKey(event)" contenteditable></div>
<script>
function printKey(e){
console.log(e);
console.log(e.key);
}
</script>
<hr>
<script>
window.onkeydown = function(){
console.log("window监控");
}
</script>
JS的自动触发操作
<h1 id="count">0</h1>
<input id="btn" type="button" value="累加" οnclick="addCount()">
<script>
var count = 0;
var h1Dom = document.querySelector("#count");
h1Dom.innerHTML = count;
function addCount(){
console.log("addCount");
count++;
h1Dom.innerHTML = count;
}
// js为dom对象的所有事件，都提供一个同名的触发方法，该方法只要被调用，会立即执行事件对应的函数
var btnDom = document.querySelector("#btn");
// 自动调用 点击功能
// btnDom.click();
// 延迟计时器
// setInterval( fun,time-ms );
// 每过time时间长度，自动执行一次 fun 方法
setInterval( function(){
btnDom.click();
},500 )
</script>