Dom 事件

事件监听

我们计算机在解析我们js代码的时候 , 会查看某些元素身上是否添加了事件, 随时监听这些事件有没有被触发, 如果触发就立即执行相应的行为.
onclick 单击
ondblclick 双击
onmouseenter 鼠标进入
onmouseleave 鼠标离开
onmousedown 鼠标按下
onmouseup 鼠标弹起
onfocus 获取焦点
onblur 失去焦点
onload 加载完毕之后

注意: 用js 书写用户交互样式的写法跟css3的写法一样,该怎么写就怎么写
//元素通过点语法绑定事件名然后使用 = 赋值 一个匿名函数 元素.事件名 =function(){}

案列1

<p>
  <input type="button" value="默认文本" id="btn">
    </p>
// 单击 onclick , 单击btn 弹出内部文本
// 触发事件 , 函数会立即执行,不需要添加调用小括号
oBtn.onclick=function(){
  //除了自定义属性使用get, set 其他都使用点语法
  alert(oBtn.value);
};

案列2

var oBtn = document.getElementById("btn");
var oBox = document.getElementById("box");
//点击按钮改变其它属性或者其他元素的事件
oBtn.onclick = function () {
  oBox.style.width = "400px";
  oBox.style.height = "400px";
  oBox.style.backgroundColor = "pink";
};
//事件: 鼠标进入
oBox.onmouseenter = function () {
  oBox.style.width = "400px";
  oBox.style.height = "400px";
  oBox.style.backgroundColor = "pink";
};
//事件: 鼠标离开
oBox.onmouseleave = function () {
  oBox.style.width = "200px";
  oBox.style.height = "200px";
};

Js语句需要书写在所有标签最后, 标签加载完毕之后 , js 语句才执行
如果js 书写在标签之前, js先加载, HTML标签还没有加载完毕, 我们没有办法获取元素

如果书写 onload 事件 , 表示js 在所有标签加载完毕之后才执行事件内部的语句
调用对象只能是window

如果书写js文件在HTML 文件前 前提得先先写 onload 语句 如

window.onload = function () { <script>//js语句 </script> }