417 事件、监听、jQuery、轮播

am:通用事件

a链接事件阻止默认行为 return false

HTML元素大都包含了自己的默认行为，例如：超链接、提交按钮等。我们可以通过在绑定事件中加上return false来阻止它的默认行为。

通用性的事件监听方法
1.绑定HTML元素属性
<input type="button" value="clickMe" onClick="check(this)">
2 绑定dom对象属性
document.getElementById("btn1").onClick=test;//test函数名

标准DOM事件监听方法

[object].addEventListener(“事件类型”,”处理函数”,”冒泡事件或捕获事件”);

[object].removeEventListener(“事件类型”,”处理函数”,”冒泡事件或捕获事件”);

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>通用性的事件监听方法</title>
<script type="text/javascript">
function show(){
alert("你点击了我");
}
//页面加载完成后调用
window.onload=function(){
/*第二种添加事件方式*/
document.getElementById("mytest1").onclick=show;
}
</script>
</head>
<body>
<a href="https://www.baidu.com/" onClick="return false">点击我</a>
<input type="button" value="测试1" id="mytest1" >
<button type="button" id="test2" onClick="show()"><b>测试2</b></button>
</body>
</html>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>标准DOM中的事件监听方法</title>
<script type="text/javascript">
    function show(){
        alert("你点击我了");
    }
    //取消bt1按钮的点击事件
    function concel(){
        //[object].removeEventListener(“事件类型”,”处理函数”,false);
        var bt1=document.getElementById("mytest1");
        bt1.removeEventListener("click",show,false);
    }
    window.onload=function(){
    //[object].addEventListener(“事件类型”,”处理函数”,false);
    var bt1=document.getElementById("mytest1");
    bt1.addEventListener("click",show,false);
    //获取测试2按钮
    var bt2=document.getElementById("mytest2");
    bt2.addEventListener("click",concel,false);
    }
</script>
</head>

<body>
<input type="button" value="测试1" id="mytest1">
<button type="button" id="mytest2"><b>测试2</b></button>
</body>
</html>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script type="text/javascript">
    function show(){
        /*var str=document.getElementById("a").value;
        alert(str);*/
        alert("aaa");
    }
</script>
</head>

<body>
<form action="#" onSubmit="show()">
    <input type="text" value="aa" onSelect="show()">
    <input type="text" value="bb" onChange="show()">
    <input type="text" value="cc" onFocus="show()">
    <input type="text" value="dd" onBlur="show()" id="a">    
    <input type="submit" value="提交">
</form>
<div style="width: 200px;height: 200px;background: red" onMouseOver="show()"></div>
</body>
</html>

<title>鼠标当小手</title>
<style>
    #d1{
        height:200px;
        width: 200px;
        background: red;
    }    
    #d1:hover{
        /*鼠标变小手*/
        cursor:pointer;
    }
</style>
</head>
<body>
    <div id="d1"></div>
</body>

<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script type="text/javascript">
    window.onload=function(){
        //通过id属性找元素(得到一个元素对象)
        var doc=document.getElementById("p");
        //通过class属性找元素(得到一个数组)
        var arr=document.getElementsByClassName("p1");
        alert(arr[1].innerHTML);
        //通过元素名称找元素(得到一个数组)
        var arr2=document.getElementsByTagName("p");
    }
</script>
</head>
<body>
    <p class="p1">a</p>
    <p class="p1">b</p>
    <p class="p1">c</p>
    <p class="p">d</p>
</body>

<body>
    <input type="text" value="aaa" id="in" aaa="bbb">
</body>
<script type="text/javascript">
    //1.获取元素属性值：元素对象.属性名
/*    var v=document.getElementById("in").value;
    alert(v);*/
    //2.获取元素属性值：元素对象.getAttribute("属性名");
    /*var inp=document.getElementById("in");
    var v=inp.getAttribute("aaa");
    alert(v);*/
    //给元素属性赋值
    var inp=document.getElementById("in");
    inp.setAttribute("value","cccc");
</script>
</html>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<!--引入jQuery的js文件-->
<script type="text/javascript" src="js/jquery-3.4.0.min.js"></script>
</head>

<body>
<p id="p1">a</p>
<p class="p2" align="center">b</p>
<p class="p2">c</p>
<p class="p2">d</p>
<div>
    <p>e</p>
    <p>f</p>
</div>
<input type="text" value="aaaaaaaa">
</body>
<script type="text/javascript">
    /*id选择器*/
    /*var p1=$("#p1");
    alert(p1.html());*/
    /*class选择器*/
    /*var arr=$(".p2");
    alert(arr.length);*/
    /*元素选择器*/
    /*var arr=$("p");
    alert(arr.length);*/
    /*父子关系选择器*/
    /*var arr=$("div p");
    alert(arr.length);*/
    /*属性选择器*/
    /*var obj=$("[align='center']");
    alert(obj.html());*/
    /*如果得到的是数组，则用jqDom.eq(下标)*/
    /*alert($(".p2").eq(0).html());*/
    //获取js对象   js->jquery   $(jsDom)
    /*var p1=document.getElementById("p1");
    alert($(p1).html());*/
    //获取jQuery对象 jquery->js   $('div')[0]    $('div').get(0)
    /*alert($(".p2").get(1).innerHTML);*/
    //给非表单元素赋值
    /*$("#p1").html("你好");*/
    //获取表单的value值
    /*alert($("input").val());*/
    //给表单元素赋值
    $("input").val("bbbbbbbb");
</script>

</html>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script type="text/javascript">
    var arr=null;
    var tp=null;
    var index=0;
    //当页面加载完成以后执行
    window.onload=function(){
        //定义一个数组装有图片地址
        arr=["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg"];
        //获取img元素
        tp=document.getElementById("tp");
        start();
    }
    function change(obj){
        //获取用户点的是哪个按钮
        index=obj.value;
        alert(index);
        tp.src=arr[index];
    }
    //下一张
    function next(){
        //如果当前图片是最后一张
        if(index==arr.length-1){
            index=0;
        }else{
            index=index+1;
        }
        tp.src=arr[index];
    }
    //上一张
    function up(){
        //如果当前图片是最后一张
        if(index==0){
            index=arr.length-1;
        }else{
            index=index-1;
        }
        tp.src=arr[index];
    }
    //开始轮播
    function start(){
        var timer=setInterval("next()",5000);
    }
</script>
</head>

<body>
<img src="img/1.jpg" id="tp">
<input type="button" value="上一页" onClick="up()">
<input type="button" value="0" onClick="change(this)">
<input type="button" value="1" onClick="change(this)">
<input type="button" value="2" onClick="change(this)">
<input type="button" value="3" onClick="change(this)">
<input type="button" value="下一页" onClick="next()">

</body>
</html>

417 事件、监听、jQuery、轮播

猜你喜欢