JavaScript HTML DOM 事件

1. html 事件属性

onclick：用户点击鼠标时触发
onfocus：获取鼠标焦点时触发
onchange：输入字段被改变时触发
onmouseover, onmouseout：鼠标移入或移出时触发
onmousedown, onmouseup：鼠标点击或释放时触发
onload, onunload：进入页面或离开页面时触发

2. DOM 事件基本实例

2.1 onclick 事件点击元素时改变内容

<h3>2.1 从事件处理器调用函数</h3>
<script>
    function changeText(obj){
        obj.innerHTML = "OOP";
    }
</script>
<p onclick="changeText(this)">点击文本</p>

p元素中添加 onclick属性
编写事件函数changeText(obj),传入this参数对事件调用者更改
修改逻辑：根据传输的对象obj通过obj.innerHTML修改文本

2.2 onclick 事件点击按钮时添加日期

<h3>2.2 onclick 事件属性</h3>
<script>
    function displayDate(){
        document.getElementById("date").innerHTML = Date();
    }
</script>
<button onclick="displayDate()">日期</button>
<p id="date"></p>

2.1和2.2的区别在于使用onclick事件改变的不是事件的调用者
改动点在于将参数this修改为需要改变的元素的id，但是displayDate("date")会被当做字符串处理而非当作对象处理
因此不能采用参数方式传递对象，而是在函数代码块里获取待修改对象document.getElementById("date")

2.3 onfocus 事件获得鼠标焦点时改变文本框颜色

在这里插入图片描述

<h3>2.3 onfocus 当输入字段获得焦点时，改变颜色</h3>
<script>
    function monfocus(obj){
        obj.style.backgroundColor="yellow";
    }
</script>
点击：<input type="textd" onfocus="monfocus(this)" style="border: 1px solid black"/>

2.4 onchange 事件离开输入框后将文本转变为大写

在这里插入图片描述

<h3>2.4 onchange事件</h3>
<p>onchange事件常结合对输入字段的验证来使用</p>
<script>
    function checkChange(){
        var x = document.getElementById("inputName");
        x.value = x.value.toUpperCase();
    }
</script>
<input type="text" id="inputName" onchange="checkChange()"/>
<p>离开输入框后，函数将被触发，将小写转为大写</p>

2.5 onmouseover, onmouseout 事件鼠标移入移除切换时改变文本及样式

在这里插入图片描述

<h3>2.5 onmouseover和onmouseout事件</h3>
<p>onmouseover和onmouseout事件可用于在用户移至HTML元素上方或移除元素时触发函数</p>
<script>
    function mOver(obj){
        obj.innerHTML = "Thank You";
        obj.style.backgroundColor="#a7c942"
    }
    function mOut(obj){
        obj.innerHTML = "Mouse Over Me"
        obj.style.backgroundColor="#AD38C9"
    }
</script>
<div onmouseover="mOver(this)" onmouseout="mOut(this)"
     style="width: 150px;height: 20px;padding: 40px;">Mouse Over</div>

2.6 onmousedown, onmouseup 事件鼠标点击释放切换时改变本文

在这里插入图片描述

<h3>2.6 onmousedown,onmouseup事件</h3>
<script>
    function mDown(obj){
        obj.innerHTML = "pick up";
        obj.style.backgroundColor="#a7c942"
    }
    function mUp(obj){
        obj.innerHTML = "put down";
        obj.style.backgroundColor="lightcoral";
    }
</script>
<div onmousedown="mDown(this)" onmouseup="mUp(this)"
     style="width: 150px; height: 20px; padding: 40px;">mouse up && down</div>