js/jquery添加事件

1：<h1 onclick="this.innerHTML = 'Hello!'">点击此文本！</h1>

2：<h1 onclick="changeText(this)">点击此文本！</h1>
<script>
function changeText(id) {
    id.innerHTML = "Hello:)";
}
</script>

3：onclick 事件

<button onclick="displayDate()">时间是？</button>
<script>
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>
<p id="demo"></p>

$("button").click(function() {
..some code...
} )
$('.box').on('click','li',function () {
    console.log($(this));
})
//未来追加的元素  是没有事件 我们通过事件委托  当你出现点击页面中的DOM没有任何反应
//1.DOM是否underfine  2.考虑事件代理
$('#append').click(function () {
    var val = $('input[type=text]').val();
    $('ul').append(`<li>${val}</li>`);
})

4：onload 和 onunload 事件

当用户进入后及离开页面时，会触发 onload 和 onunload 事件。
onload 事件可用于检测访问者的浏览器类型和浏览器版本，然后基于该信息加载网页的恰当版本。
onload 和 onunload 事件可用于处理 cookie。

5、onchange 事件

onchange 事件经常与输入字段验证结合使用。
下面是一个如何使用 onchange 的例子。当用户改变输入字段内容时，会调用 upperCase() 函数。

实例

<input type="text" id="fname" onchange="upperCase()">

6、onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件可用于当用户将鼠标移至 HTML 元素上或移出时触发某个函数：
<div onmouseover="mOver(this)" onmouseout="mOut(this)"
style="background-color:#D94A38;width:120px;height:20px;padding:40px;">
请把鼠标移上来</div>
<script>
function mOver(obj) {
obj.innerHTML = "谢谢您"
}
function mOut(obj) {
obj.innerHTML = "请把鼠标移上来"
}
</script>

$('ul li').mouseover(function () { console.log('进来了') $('ul li .list').show(); })
$('ul li').mouseout(function () { console.log('出去了') $('ul li .list').hide(); })
$('.box').hover(function () {
// 进入时执行 $(this).css('backgroundColor', 'green')
}, function () {
// 离开时执行 $(this).css('backgroundColor', 'red')
})

7、onmousedown, onmouseup 以及 onclick 事件

onmousedown, onmouseup 以及 onclick 事件构成了完整的鼠标点击事件。
首先当鼠标按钮被点击时，onmousedown 事件被触发；然后当鼠标按钮被释放时，onmouseup 事件被触发；最后，当鼠标点击完成后，onclick 事件被触发。
<div onmousedown="mDown(this)" onmouseup="mUp(this)"
style="background-color:#D94A38;width:90px;height:20px;padding:40px;">
点击鼠标</div>
<script>
function mDown(obj) {
obj.style.backgroundColor = "#1ec5e5";
obj.innerHTML = "松开鼠标";
}
function mUp(obj) {
obj.style.backgroundColor="#D94A38";
obj.innerHTML="谢谢您";
}
</script>
onmousedown 和 onmouseup当用户按下鼠标按钮时改变图像。onload当页面已完成加载时显示报警框。onfocus当输入字段获得焦点时改变其背景色。