• click
    클릭했을 때 발생하는 이벤트. 
  • dblclick
    더블클릭을 했을 때 발생하는 이벤트
  • mousedown
    마우스를 누를 때 발생
  • mouseup
    마우스버튼을 땔 때 발생
  • mousemove
    마우스를 움직일 때
  • mouseover
    마우스가 엘리먼트에 진입할 때 발생
  • mouseout
    마우스가 엘리먼트에서 빠져나갈 때 발생
  • contextmenu
    컨텍스트 메뉴가 실행될 때 발생
  • event.shiftKey
  • event.altKey
  • event.ctrlKey



<html>

    <head>

        <style>

            body{

                background-color: black;

                color:white;

            }

            #target{

                width:200px;

                height:200px;

                background-color: green;

                margin:10px;

            }

            table{

                border-collapse: collapse;

                margin:10px;

                float: left;

                width:200px;

            }

            td, th{

                padding:10px;

                border:1px solid gray;

            }

        </style>

    </head>

    <body>

        <div id="target">

 

        </div>

        <table>

            <tr>

                <th>event type</th>

                <th>info</th>

            </tr>

            <tr>

                <td>click</td>

                <td id="elmclick"></td>

            </tr> 

            <tr>

                <td>dblclick</td>

                <td id="elmdblclick"></td>

            </tr>

            <tr>

                <td>mousedown</td>

                <td id="elmmousedown"></td>

            </tr>         

            <tr>

                <td>mouseup</td>

                <td id="elmmouseup"></td>

            </tr>         

            <tr>

                <td>mousemove</td>

                <td id="elmmousemove"></td>

            </tr>         

            <tr>

                <td>mouseover</td>

                <td id="elmmouseover"></td>

            </tr>         

            <tr>

                <td>mouseout</td>

                <td id="elmmouseout"></td>

            </tr>

            <tr>

                <td>contextmenu</td>

                <td id="elmcontextmenu"></td>

            </tr>         

        </table>

        <table>

            <tr>

                <th>key</th>

                <th>info</th>

            </tr>

            <tr>

                <td>event.altKey</td>

                <td id="elmaltkey"></td>

            </tr>

            <tr>

                <td>event.ctrlKey</td>

                <td id="elmctrlkey"></td>

            </tr>

            <tr>

                <td>event.shiftKey</td>

                <td id="elmshiftKey"></td>

            </tr>

        </table>

        <table>

            <tr>

                <th>position</th>

                <th>info</th>

            </tr>

            <tr>

                <td>event.clientX</td>

                <td id="elemclientx"></td>

            </tr>

            <tr>

                <td>event.clientY</td>

                <td id="elemclienty"></td>

            </tr>

        </table>

        <script>

        var t = document.getElementById('target');

        function handler(event){

            var info = document.getElementById('elm'+event.type);

            var time = new Date();

            var timestr = time.getMilliseconds();

            info.innerHTML = (timestr);

            if(event.altKey){

                document.getElementById('elmaltkey').innerHTML = timestr;

            }

            if(event.ctrlKey){

                document.getElementById('elmctrlkey').innerHTML = timestr;

            }

            if(event.shiftKey){

                document.getElementById('elmshiftKey').innerHTML = timestr;

            }

            document.getElementById('elemclientx').innerHTML = event.clientX;

            document.getElementById('elemclienty').innerHTML = event.clientY;

        }

        t.addEventListener('click', handler);

        t.addEventListener('dblclick', handler);

        t.addEventListener('mousedown', handler);

        t.addEventListener('mouseup', handler);

        t.addEventListener('mousemove', handler);

        t.addEventListener('mouseover', handler);

        t.addEventListener('mouseout', handler);

        t.addEventListener('contextmenu', handler);

        </script>

    </body>

</html>

'오락기 > js' 카테고리의 다른 글

prevent jQuery evnet  (0) 2017.04.18
jQuery On evnet  (0) 2017.04.18
load event  (0) 2017.04.18
form  (0) 2017.04.18
prevent event  (0) 2017.04.18

<!-- <head>

    <script>

        window.addEventListener('load', function(){

            var t = document.getElementById('target');

            console.log(t);

        })

    </script>

</head>

<body>

    <p id="target">Hello</p>

</body> --> 

//이건 이미지까지 로드 기다려야함


<html>

    <head>

        <script>

            window.addEventListener('load', function(){

                console.log('load');

            })

            window.addEventListener('DOMContentLoaded', function(){

                console.log('DOMContentLoaded');

            })

        </script>

    </head>

    <body>

        <p id="target">Hello</p>

    </body>

</html>

'오락기 > js' 카테고리의 다른 글

jQuery On evnet  (0) 2017.04.18
input evnet  (0) 2017.04.18
form  (0) 2017.04.18
prevent event  (0) 2017.04.18
event capturing bubbling  (0) 2017.04.18

submit

<form id="target" action="result.html">

    <label for="name">name</label> <input id="name" type="name" />

    <input type="submit" />

</form>

<script>

var t = document.getElementById('target');

t.addEventListener('submit', function(event){

    if(document.getElementById('name').value.length === 0){

        alert('Name 필드의 값이 누락 되었습니다');

        event.preventDefault();//< 이벤트 방지

    }

});

</script>


change

<p id="result"></p>

<input id="target" type="name" />

<script>

var t = document.getElementById('target');

t.addEventListener('change', function(event){

    document.getElementById('result').innerHTML=event.target.value;

});

</script>



blur

focus


<input id="target" type="name" />

<script>

var t = document.getElementById('target');

t.addEventListener('blur', function(event){

    alert('blur');  

});

t.addEventListener('focus', function(event){

    alert('focus'); 

});

</script>

'오락기 > js' 카테고리의 다른 글

input evnet  (0) 2017.04.18
load event  (0) 2017.04.18
prevent event  (0) 2017.04.18
event capturing bubbling  (0) 2017.04.18
add eventListener  (0) 2017.04.18

inline

->

<p>

    <label>prevent event on</label><input id="prevent" type="checkbox" name="eventprevent" value="on" />

</p>

<p>

    <a href="http://opentutorials.org" onclick="if(document.getElementById('prevent').checked) return false;">opentutorials</a>

</p>

<p>

    <form action="http://opentutorials.org" onsubmit="if(document.getElementById('prevent').checked) return false;">

            <input type="submit" />

    </form>

</p>


property

->

<p>

    <label>prevent event on</label><input id="prevent" type="checkbox" name="eventprevent" value="on" />

</p>

<p>

    <a href="http://opentutorials.org">opentutorials</a>

</p>

<p>

    <form action="http://opentutorials.org">

            <input type="submit" />

    </form>

</p>

<script>

    document.querySelector('a').onclick = function(event){

        if(document.getElementById('prevent').checked)

            return false;

    };

     

    document.querySelector('form').onclick = function(event){

        if(document.getElementById('prevent').checked)

            return false;

    };

 

</script>



addeventListener

body>
<p>
            <label>prevent event on</label><input id="prevent" type="checkbox" name="eventprevent" value="on" />
        </p>
        <p>
            <a href="http://opentutorials.org">opentutorials</a>
        </p>
        <p>
            <form action="http://opentutorials.org">
                    <input type="submit" />
            </form>
        </p>
        <script>
            document.querySelector('a').addEventListener('click', function(event){
                if(document.getElementById('prevent').checked)
                    event.preventDefault();
            });
             
            document.querySelector('form').addEventListener('submit', function(event){
                if(document.getElementById('prevent').checked)
                    event.preventDefault();
            });
 
        </script>    </body>


'오락기 > js' 카테고리의 다른 글

load event  (0) 2017.04.18
form  (0) 2017.04.18
event capturing bubbling  (0) 2017.04.18
add eventListener  (0) 2017.04.18
property event  (0) 2017.04.18

.가장 안에 있는 엘리먼트에 이벤트 발생되고 그 상위 이벤트가 동시에 발생된다고면

안에서부터 발생된다.


html 이벤트

body 이벤트

input 이벤트 가 된다고하면 




INPUT HTML capturing

(index):18 INPUT BODY capturing

(index):18 INPUT FIELDSET capturing

(index):18 INPUT INPUT target


<html>

    <head>

        <style>

            html{border:5px solid red;padding:30px;}

            body{border:5px solid green;padding:30px;}

            fieldset{border:5px solid blue;padding:30px;}

            input{border:5px solid black;padding:30px;}

        </style>

    </head>

    <body>

        <fieldset>

            <legend>event propagation</legend>

            <input type="button" id="target" value="target">          

        </fieldset>

        <script>

        function handler(event){

            var phases = ['capturing', 'target', 'bubbling']

            console.log(event.target.nodeName, this.nodeName, phases[event.eventPhase-1]);

        }

//         document.getElementById('target').addEventListener('click', handler, true);

//         document.querySelector('fieldset').addEventListener('click', handler, true);

//         document.querySelector('body').addEventListener('click', handler, true);

//         document.querySelector('html').addEventListener('click', handler, true);

document.getElementById('target').addEventListener('click', handler, false);

document.querySelector('fieldset').addEventListener('click', handler, false);

document.querySelector('body').addEventListener('click', handler, false);

document.querySelector('html').addEventListener('click', handler, false);



//따라서 addEventListener의 3번째 파라미터는 CAPTURING의 기능이듯하다.

        </script>

    </body>

</html>



캡쳐링은 밖에서 안으로

버블링은 안에서 밖으로


'오락기 > js' 카테고리의 다른 글

form  (0) 2017.04.18
prevent event  (0) 2017.04.18
add eventListener  (0) 2017.04.18
property event  (0) 2017.04.18
inline event  (0) 2017.04.18

<body>

<input type="button" id="target" value="button" />

<script>

    var t = document.getElementById('target');

    t.addEventListener('click', function(event){  //function 이하부분이 clikc이라는 이름의 이벤트로 t라는객체에 들어감

        alert('Hello world, '+event.target.value); //event.target.value 가 결국 buttion 이된다.

    });

</script>

</body>

'오락기 > js' 카테고리의 다른 글

prevent event  (0) 2017.04.18
event capturing bubbling  (0) 2017.04.18
property event  (0) 2017.04.18
inline event  (0) 2017.04.18
jQuery node  (0) 2017.04.18

value 와  script 가 분리



<input type="button" id="target" value="button" />

<script>

    var t = document.getElementById('target');

    t.onclick = function(){

        alert('Hello world');

    }

</script>

'오락기 > js' 카테고리의 다른 글

event capturing bubbling  (0) 2017.04.18
add eventListener  (0) 2017.04.18
inline event  (0) 2017.04.18
jQuery node  (0) 2017.04.18
append remove replace node  (0) 2017.04.18

<input type="button" id="target" onclick="alert('Hello world, '+document.getElementById('target').value);" value="button" />


<input type="button" onclick="alert('Hello world, '+this.value);" value="button" />


이벤트를 그대로 삽입



'오락기 > js' 카테고리의 다른 글

add eventListener  (0) 2017.04.18
property event  (0) 2017.04.18
jQuery node  (0) 2017.04.18
append remove replace node  (0) 2017.04.18
node + callback  (0) 2017.04.18

http://api.jquery.com/category/manipulation/


<body id="start">

<div class="target">

    content1

</div>

 

<div class="target">

    content2

</div>

 

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

<script>

    $('.target').before('<div>before</div>');

    $('.target').after('<div>after</div>');

    $('.target').prepend('<div>prepend</div>');

    $('.target').append('<div>append</div>');

</script>


</body>


나머진 나중에

'오락기 > js' 카테고리의 다른 글

property event  (0) 2017.04.18
inline event  (0) 2017.04.18
append remove replace node  (0) 2017.04.18
node + callback  (0) 2017.04.18
Node Type  (0) 2017.04.18


<ul id="target">

    <li>HTML</li>

    <li>CSS</li>

</ul>

<input type="button" onclick="callAppendChild();" value="appendChild()" />

<input type="button" onclick="callInsertBefore();" value="insertBefore()" />

<script>

    function callAppendChild(){

        var target = document.getElementById('target');

        var li = document.createElement('li');

        var text = document.createTextNode('JavaScript');

        li.appendChild(text);

        target.appendChild(li);

    }

 

    function callInsertBefore(){

        var target = document.getElementById('target');

        var li = document.createElement('li');

        var text = document.createTextNode('jQuery');

        li.appendChild(text);

        target.insertBefore(li, target.firstChild);

    }







'오락기 > js' 카테고리의 다른 글

inline event  (0) 2017.04.18
jQuery node  (0) 2017.04.18
node + callback  (0) 2017.04.18
Node Type  (0) 2017.04.18
node select  (0) 2017.04.18

+ Recent posts