事件基础

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第3天，点击查看活动详情

事件基础

事件基础

JavaScript使我们有能力创建动态页面，而事件是可以被javaScript侦测到的行为。

简单理解：触发----响应机制。

网页中的每个元素都可以产生某些可以触发javaScript的事件，例如，我们可以在用户点击某按钮时产生一个事件，然后去执行某些操作。

事件有三方面组成(事件三要素):

1.事件源 事件被触发的对象

2.事件类型 如何触发，什么事件，例如鼠标点击(onclick)

3.事件处理程序 通过函数赋值的方式完成

执行事件步骤

1.获取事件源

2.注册事件(绑定事件)

3.添加事件处理程序(采取函数赋值形式)

例如下案例

点击div，控制台打印内容

var div= document.querySelector("div");
div.onclick= function(){
console.log("你好");
}

操作元素

JavaScript的DOM操作可以改变网页内容、结构和样式，我们可以利用DOM操作元素来改变元素里面的内容、属性等，注意以下都是属性。

改变元素内容

有下面两种方法 1.element.innerText 从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉

2.element.innerHTML 起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行

小案例

点击按钮，让div里的文字会变化

<button>点击改变</button>
<div>时间</div>
// 1.获取元素
var btn= document.querySelector("button");
var div= document.querySelector("div");
// 2. 注册事件
btn.onclick=function(){
div.innerText="2022-8-5"
}

同时可以不注册事件实现(不点击按钮，直接页面刷新)

<button>点击改变</button>
<p>时间</p>

var p= document.querySelector("p");
p.innerText="2022-8-5"

修改元素属性

例如src,href,id,alt，title 例如改变图片title，直接可以获取后让img.title = ""

修改表单属性(改变表单内内容就不能用innerHTML了)

例如type，value,selected，disabled