【後转前要多久】# Day26 JS - 事件、监听

e - event

HTML

<body>

<input type="button" class="btn" value="点击">
<script src="index.js"></script>

</body>

JavaScript

var el = document.querySelector('.btn');

el.onclick = function (event){
    console.log(event);
}

事件的物件中包含

target 触发到的DOM目标物件
- e.target
- e.target.nodeName 目标的Tag
- e.target.value 目标的内容值
screenX、screenY 滑鼠触发座标，相对於萤幕最左上角，不受滚动影响
clientX、clientY 滑鼠触发座标，相对於浏览器左上角，不受滚动影响
pageX、pageY 滑鼠触发座标，相对於档案文件最左上角，受滚动影响
offsetX、offsetY 滑鼠触发座标，相对於被触发的DOM元件
layerx、layerY 与offset同(火狐版)
altKey、ctrlKey 是否同时按下Alt / Ctrl键

三种监听事件

onClick 写在 HTML(绑定标签事件处理)

最老式的写法，容易被攻击、在onClick中被插入恶意程序码

HTML

<body>

<input onclick="alert('我被点击了!!');" type="button" value="点击">
<script src="index.js"></script>

</body>

或者将function拿到JS当中

HTML

<body>

<input onclick="sayHello();" type="button" class="btn" value="点击">
<script src="index.js"></script>

</body>

JavaScript

function sayHello(){
    alert("Hello");
}

onClick 写在 JS内

可用程序控制绑定时机
不能同时绑定多个事件在同一个物件上(後面的程序码会盖过前面)

HTML

<input type="button" class="btn" value="点击">
<script src="index.js"></script>

JavaScript

var btn = document.querySelector('.btn');

btn.onclick = function (){  // onclick 全部小写
    alert("~~~~");
}
btn.onclick = function (){  // onclick 全部小写
    alert("!!!!");
}

监听 addEventListener

较新的写法
可同时绑定多个事件在同一个物件上

JavaScript

var btn = document.querySelector('.btn');

// 选择事件的参数 'click'、不是onClick
btn.addEventListener('click', function (){
    alert("监听中-1");
})
btn.addEventListener('click', function (){
    alert("监听中-2");
})

第三个参数options(预设为false)
false 事件气泡(event bubbling) 按DOM节点从指定元素开始往外找
true 事件捕捉(event capture) 按DOM节点从最外层开始往内找

绑定事件到btn及body上，
点击btn时会同时触发btn、body事件

HTML

<body style="border: 5px solid black;height: 100vw">

<input type="button" class="btn" value="点击">
<script src="index.js"></script>

</body>

JavaScript

var btn = document.querySelector('.btn');
var body= document.querySelector('body');
btn.addEventListener('click', function (){
    alert("监听btn");
},false)
body.addEventListener('click', function (){
    alert("监听body");
},false)

阻止、取消事件

阻止传播 stopPropagation

触发btn後就阻止其他事件发生，防止一键触发太多事件
阻止当前事件继续进行捕捉（capturing）及冒泡（bubbling）阶段的传递。

JavaScript

var btn = document.querySelector('.btn');
var body= document.querySelector('body');
btn.addEventListener('click', function (e){
    e.stopPropagation()
    alert("监听btn");

},false)
body.addEventListener('click', function (e){
    alert("监听body");
},false)

取消预设事件 preventDefault

取消预设的
<a>连结 跳转
sumbit 先透过JS查询表单有无错误，再判断送出。而非直接送出到後端。

HTML

<body>

<a id="link1" href="https://google.com">我是Google连结</a>
<a id="link2" href="#" style="margin-top: 1800px;display: block;">我是#连结</a>

<script src="index.js"></script>

</body>

JavaScript

var el1 = document.querySelector('#link1');
var el2 = document.querySelector('#link2');

el1.addEventListener('click', function (e){
    // 取消元素的默认行为，原本会跳到google网址
    e.preventDefault()
    console.log("取消元素的默认行为，原本会跳到google网址")
})

el2.addEventListener('click', function (e){
    // 取消元素的默认行为，原本会跳到最首页(#处)
    e.preventDefault()
    console.log("取消元素的默认行为，原本会跳到最首页(#处)")
})

侦测改变事件

.addEventListener('change',func,false);

HTML

<body>

<select id="level">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
    <option value="D">D</option>
</select>

<ul class="list"></ul>

<script src="index.js"></script>

</body>

JavaScript

document.getElementById("level").selectedIndex = -1; // 一开始让Select处於未选状态

var level = document.getElementById('level');
var list = document.querySelector('.list');

var students = [
    {name: 'Jason', level: 'A',},
    {name: 'Tom', level: 'B',},
    {name: 'Bob', level: 'B',},
    {name: 'Amber', level: 'A',},
    {name: 'Fenix', level: 'D'},
    {name: "York", level: "C",},
    {name: "Milly", level: "D",},
]

level.addEventListener('change', updateList, false);

function updateList(e) {
    var select = e.target.value;
    var str = '';
    for (var i = 0; i < students.length; i++) {
        if (select === students[i].level) {
            str += '<li>' + students[i].name + '</li>';
        }
        list.innerHTML = str;
    }
}

<<: Python GUI 好用的设计观念

>>: Day26 React-实作todoList(一)前置