【补充知识点】e.target指代什么？

e.target是目标对象，如点击事件就是点击的DOM元素。e.target.value就是目标对象的值。

e.event是目标所发生的事件。

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>圣诞主题</title>
    <link rel='stylesheet' href='common.css' />
</head>

<body>
    <section class="container">
        <!-- 第一幅画面 -->
        <section class="page-a bg-adaptive">
        </section>
        <!-- 第二幅画面 -->
        <section class="page-b bg-adaptive">
        </section>
        <!-- 第三幅画面 -->
        <section class="page-c bg-adaptive">
        </section>
    </section>
    选择页面：
    <select id="page">
        <option value="page-a" selected="">1</option>
        <option value="page-b">2</option>
        <option value="page-c">3</option>
    </select>
</body>
<script type="text/javascript">

var doc = document;
/**
 * 针对content中的html文本框
 * 增加rem的修改
 * @param  {[type]} doc [description]
 * @param  {[type]} win [description]
 * @return {[type]}     [description]
 */
var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function() {
        //自适应设置容器高度
        var container = document.querySelector(".container")
            //原始比例
        var proportion = 900 / 1440;
        container.style.height = container.clientWidth * proportion + "px";
    };
window.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);



/**
 * 下拉选择页面
 * @type {[type]}
 */
var page = document.querySelector("#page");


//层级
var index = 10;
//切换切换
page.addEventListener("change",function(e){
    //页面元素
    alert(e.target.value)
    var pageElement = document.querySelector("." + e.target.value)
    pageElement.style.zIndex = ++index;
},false)

</script>

</html>

【补充知识点】e.target指代什么？

猜你喜欢